Учу vue js 3. Решила попробовать в работе eventEmitter. Есть два компонента Car и Counter, которые выводятся в App. Задача простая, нужно чтобы при клике на кнопку в компоненте Car, менялось состояние переменной в компоненте Counter. Но этого не происходит, ошибок нет. Подскажите, что я делаю не так?
Файл main.js
import { createApp } from 'vue'
import App from './App.vue'
//eventEmitter
const eventEmitter = require('events');
export default new eventEmitter();
createApp(App).mount('#app');
файл App.vue
<template>
<div class="App">
<appCar></appCar>
<appCounter></appCounter>
</div>
</template>
<script>
import Car from './components/Car'
import Counter from './components/Counter'
export default {
components: {
appCar: Car,
appCounter: Counter
}
}
</script>
<style>
</style>
компонент Car.vue
<template>
<div class="Car">
<button @click="changeCounter">Counter++</button>
</div>
</template>
<script>
import eventEmitter from '../main'
export default {
name: "Car",
methods: {
changeCounter(){
eventEmitter.emit('change-counter');
}
}
}
</script>
<style scoped>
</style>
компонент Counter.vue
<template>
<div class="Counter">
<h1>Counter: {{ counter }}</h1>
</div>
</template>
<script>
import eventEmitter from '../main'
export default {
name: "Counter",
data(){
return{
counter: 0
}
},
created() {
eventEmitter.on('change-counter', function() {
this.counter++
});
}
}
</script>
<style scoped>
</style>