Vue Emit - Руководство по использованию функции $emit во Vue.js
Vue emit - это метод для взаимодействия между компонентами во фреймворке Vue.js. Он предназначен для перенаправления событий из дочернего компонента в родительский.
Когда дочерний компонент генерирует событие (event), используется метод $emit() для отправки этого события на верхний уровень родительского компонента. Родительский компонент может отслеживать это событие и реагировать на него.
Пример использования метода emit в компонентах Vue.js:
// Дочерний компонент ExampleComponent.vue
export default {
props: {
buttonText: {
type: String,
default: "Click me"
}
},
methods: {
emitEvent() {
this.$emit("custom-event", "Это данные, которые передаются в родительский компонент");
}
}
};
// Родительский компонент ParentComponent.vue
{{ eventMessage }}
import ExampleComponent from 'components/ExampleComponent.vue';
export default {
components: {
ExampleComponent
},
data() {
return {
eventMessage: ""
};
},
methods: {
handleEvent(data) {
this.eventMessage = data;
}
}
};
В данном примере используется дочерний компонент ExampleComponent, который содержит кнопку, клик на которую генерирует событие. Родительский компонент ParentComponent содержит этот дочерний компонент и отслеживает событие из него. Когда событие сгенерировано, метод handleEvent в родительском компоненте выполняется и присваивает значения eventMessage, которые отображаются в этом же родительском компоненте.
Таким образом, метод emit используется для облегчения взаимодействия между компонентами в приложении Vue.js. Он позволяет передавать данные из дочернего в родительский компонент для дальнейшей обработки.