Emitovanje događaja u Vue
Kao što već znate, podaci se kreću od roditeljskih ka podređenim komponentama. Pogledajmo sada kako podređene komponente mogu da komuniciraju sa roditeljskim. To se postiže emitovanjem dogadjaja. Hajde da to vidimo u praksi.
Neka u roditeljskoj komponenti postoji neka metoda:
methods: {
func() {
alert('xxx');
}
}
Prosledimo ovu metodu kao parametar u podređenu komponentu:
<template>
<User @show="func" />
</template>
Napišimo emitovani događaj u
opciji emits:
export default {
emits: ['show'],
data() {
return {
}
}
}
Hajde sada u podređenoj komponenti da napravimo dugme koje će obrađivati klik na njega:
<template>
<button @click="handle">btn</button>
</template>
Napravimo obrađivač klika:
methods: {
handle() {
}
}
Hajde sada u obrađivaču klika
da nateramo da se pozove roditeljska
funkcija. Za ovo ćemo emitovati
događaj pomoću funkcije $emit,
kao njen parametar navodeći ime emitovanog
događaja:
methods: {
handle() {
this.$emit('show');
}
}
Prosledite u podređenu komponentu dve funkcije. Napravite u podređenoj komponenti dva dugmeta, od kojih će svako pozivati jednu od prosleđenih funkcija.
