Események kibocsátása Vue-ban
Ahogy már tudod, az adatok a szülő komponensekből áramlanak a gyermek komponensekbe. Nézzük most meg, hogyan kommunikálhatnak a gyermek komponensek a szülőikkel. Ezt események kibocsátásával tehetjük meg. Lássuk a gyakorlatban.
Tegyük fel, hogy a szülő komponensben van egy metódus:
methods: {
func() {
alert('xxx');
}
}
Adjuk át ezt a metódust paraméterként a gyermek komponensnek:
<template>
<User @show="func" />
</template>
Írjuk be a kibocsátandó eseményt a emits beállításba:
export default {
emits: ['show'],
data() {
return {
}
}
}
Most készítsünk a gyermek komponensben egy gombot, amely kezeli a rá kattintást:
<template>
<button @click="handle">btn</button>
</template>
Készítsünk kattintáskezelőt:
methods: {
handle() {
}
}
Most a kattintáskezelőben
érjük el, hogy a szülői függvény meghívódjon.
Ehhez bocsássunk ki egy eseményt a $emit függvénnyel,
melynek paramétere a kibocsátott esemény neve:
methods: {
handle() {
this.$emit('show');
}
}
Adj át a gyermek komponensnek két függvényt. Készíts a gyermek komponensben két gombot, mindegyik meghívja az egyik átadott függvényt.
