Испускание событий в Vue
Как вы уже знаете, данные движутся от родительских компонентов к дочерним. Давайте посмотрим теперь, как дочерние компоненты могут общаться с родительскими. Это делается с помощью испускания событий. Давайте посмотрим на практике.
Пусть в родительском компоненте есть некоторый метод:
methods: {
func() {
alert('xxx');
}
}
Передадим этот метод параметром в дочерний компонент:
<template>
<User @show="func" />
</template>
Пропишем испускаемое событие в
настройке emits:
export default {
emits: ['show'],
data() {
return {
}
}
}
Давайте теперь в дочернем компоненте сделаем кнопку, которая будет обрабатывать клик по ней:
<template>
<button @click="handle">btn</button>
</template>
Сделаем обработчик клика:
methods: {
handle() {
}
}
Давайте теперь в обработчике клика
заставим вызваться родительскую
функцию. Для этого испустим
событие с помощью функции $emit,
ее параметром указав имя испускаемого
события:
methods: {
handle() {
this.$emit('show');
}
}
Передайте в дочерний компонент две функции. Сделайте в дочернем компоненте две кнопки, каждая из которых будет вызывать одну из переданных функций.