Ut sending av hendelser i Vue

Som du allerede vet, beveger data seg fra foreldrekomponenter til barnekomponenter. La oss nå se på hvordan barnekomponenter kan kommunisere med foreldrekomponenter. Dette gjøres ved å sende hendelser. La oss se på det i praksis.

Anta at i foreldrekomponenten er det en metode:

methods: {
	func() {
		alert('xxx');
	}
}

La oss sende denne metoden som en parameter til barnekomponenten:

<template>
	<User @show="func" />
</template>

La oss definere den sendte hendelsen i konfigurasjonen emits:

export default {
	emits: ['show'],
	data() {
		return {
			
		}
	}
}

La oss nå i barnekomponenten lage en knapp som vil håndtere et klikk på den:

<template>
	<button @click="handle">btn</button>
</template>

La oss lage en klikk-håndterer:

methods: {
	handle() {
		
	}
}

La oss nå i klikk-håndtereren få den foreldre metoden til å kalles. For å gjøre dette, sender vi en hendelse ved hjelp av funksjonen $emit, og spesifiserer navnet på den sendte hendelsen som parameter:

methods: {
	handle() {
		this.$emit('show');
	}
}

Send to funksjoner til barnekomponenten. Lag to knapper i barnekomponenten, hver av dem skal kalle en av de sendte funksjonene.