Емитовање догађаја у Vue
Као што већ знате, подаци се крећу од родитељских компоненти ка child компонентама. Хајде сада да погледамо како child компоненте могу да комуницирају са родитељским. То се ради путем емитовања догађаја. Хајде да погледамо у пракси.
Нека у родитељској компоненти постоји нека метода:
methods: {
func() {
alert('xxx');
}
}
Проследимо ову методу као параметар у child компоненту:
<template>
<User @show="func" />
</template>
Дефинишимо емитовани догађај у
опцији emits:
export default {
emits: ['show'],
data() {
return {
}
}
}
Хајде сада у child компоненти направимо дугме које ће хендловати клик на њега:
<template>
<button @click="handle">btn</button>
</template>
Направимо хендлер за клик:
methods: {
handle() {
}
}
Хајде сада у хендлеру клика
изазовимо родитељску
функцију. За то емитујмо
догађај користећи функцију $emit,
као њен параметар наведимо име емитованог
догађаја:
methods: {
handle() {
this.$emit('show');
}
}
Проследи у child компоненту две функције. Направи у child компоненти два дугмета, свако од којих ће позивати једну од прослеђених функција.
