Uitstuur van Gebeure in Vue
Soos jy reeds weet, beweeg data van ouerkomponente na kinderkomponente. Laat ons nou kyk hoe kinderkomponente met ouerkomponente kan kommunikeer. Dit word gedoen deur die uitstuur van gebeure. Kom ons kyk hoe dit in die praktyk werk.
Gestel die ouerkomponent het 'n sekere metode:
methods: {
func() {
alert('xxx');
}
}
Laat ons hierdie metode as 'n parameter na die kinderkomponent stuur:
<template>
<User @show="func" />
</template>
Laat ons die uitgevuurde gebeurtenis in die
instellings van emits spesifiseer:
export default {
emits: ['show'],
data() {
return {
}
}
}
Kom ons maak nou in die kinderkomponent 'n knoppie wat 'n klik daarop sal hanteer:
<template>
<button @click="handle">btn</button>
</template>
Kom ons maak 'n klikhanteerder:
methods: {
handle() {
}
}
Kom ons laat nou in die klikhanteerder
die ouerfunksie uitvoer. Om dit te doen, vuur ons
'n gebeurtenis uit met die funksie $emit,
en spesifiseer die naam van die uitgevuurde gebeurtenis
as sy parameter:
methods: {
handle() {
this.$emit('show');
}
}
Stuur twee funksies na die kinderkomponent. Maak in die kinderkomponent twee knoppies, waarvan elkeen een van die oorgeplaasde funksies sal aktiveer.
