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