Įvykių emisija Vue
Kaip jau žinote, duomenys juda nuo tėvinių komponentų prie vaikinių. Dabar pažiūrėkime, kaip vaikiniai komponentai gali bendrauti su tėviniais. Tai daroma naudojant įvykių emisiją. Pažiūrėkime praktiškai.
Tegul tėviniame komponente yra tam tikras metodas:
methods: {
func() {
alert('xxx');
}
}
Perduokime šį metodą kaip parametrą į vaikinį komponentą:
<template>
<User @show="func" />
</template>
Įrašykime emitinamą įvykį
emits nustatyme:
export default {
emits: ['show'],
data() {
return {
}
}
}
Dabar vaikiniame komponente sukurkime mygtuką, kuris apdoros paspaudimą ant jo:
<template>
<button @click="handle">btn</button>
</template>
Sukurkime paspaudimo apdorotuvą:
methods: {
handle() {
}
}
Dabar paspaudimo apdorotuve
priversime išsikviesti tėvinę
funkciją. Tam išemituosime
įvykį naudodami funkciją $emit,
kaip parametrą nurodydami emitinamo
įvykio pavadinimą:
methods: {
handle() {
this.$emit('show');
}
}
Perduokite į vaikinį komponentą dvi funkcijas. Vaikiniame komponente sukurkite du mygtukus, kiekvienas iš jų turi iškvietęs vieną iš perduotų funkcijų.
