Utlösande av händelser i Vue
Som du redan vet rör sig data från föräldrakomponenter till underordnade komponenter. Låt oss nu titta på hur underordnade komponenter kan kommunicera med föräldrakomponenter. Detta görs genom att utlösa händelser. Låt oss titta på det i praktiken.
Antag att föräldrakomponenten har en viss metod:
methods: {
func() {
alert('xxx');
}
}
Låt oss skicka denna metod som en parameter till den underordnade komponenten:
<template>
<User @show="func" />
</template>
Låt oss ange den utlösta händelsen i
konfigurationen emits:
export default {
emits: ['show'],
data() {
return {
}
}
}
Låt oss nu i den underordnade komponenten skapa en knapp som kommer att hantera klick på den:
<template>
<button @click="handle">btn</button>
</template>
Låt oss skapa en klickhanterare:
methods: {
handle() {
}
}
Låt oss nu i klickhanteraren
få den överordnade
funktionen att anropas. För att göra detta utlöser vi
en händelse med funktionen $emit,
med namnet på den utlösta händelsen som parameter:
methods: {
handle() {
this.$emit('show');
}
}
Skicka till den underordnade komponenten två funktioner. Skapa i den underordnade komponenten två knappar, var och en ska anropa en av de överförda funktionerna.
