Emitování událostí ve Vue
Jak již víte, data proudí z rodičovských komponent do dětských. Podívejme se nyní, jak mohou dětské komponenty komunikovat s rodičovskými. To se dělá pomocí emitování událostí. Podívejme se na to v praxi.
Nechť v rodičovské komponentě je nějaká metoda:
methods: {
func() {
alert('xxx');
}
}
Předáme tuto metodu jako parametr do dětské komponenty:
<template>
<User @show="func" />
</template>
Nastavíme emitovanou událost v
konfiguraci emits:
export default {
emits: ['show'],
data() {
return {
}
}
}
Udělejme nyní v dětské komponentě tlačítko, které bude zpracovávat kliknutí na něj:
<template>
<button @click="handle">btn</button>
</template>
Vytvořme obslužnou rutinu kliknutí:
methods: {
handle() {
}
}
Nyní v obslužné rutině kliknutí
způsobme, aby se zavolala rodičovská
funkce. K tomu emitujeme
událost pomocí funkce $emit,
jako její parametr uvedeme jméno emitované
události:
methods: {
handle() {
this.$emit('show');
}
}
Předejte do dětské komponenty dvě funkce. Vytvořte v dětské komponentě dvě tlačítka, každé z nich bude volat jednu z předaných funkcí.
