Ereignisauslösung in Vue

Wie Sie bereits wissen, fließen Daten von Elternkomponenten zu Kindkomponenten. Schauen wir uns nun an, wie Kindkomponenten mit den Elternkomponenten kommunizieren können. Dies geschieht durch das Auslösen von Ereignissen. Lassen Sie uns das in der Praxis betrachten.

Angenommen, in der Elternkomponente gibt es eine bestimmte Methode:

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

Übergeben wir diese Methode als Parameter an die Kindkomponente:

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

Legen wir das ausgelöste Ereignis in der Option emits fest:

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

Lassen Sie uns nun in der Kindkomponente eine Schaltfläche erstellen, die einen Klick darauf verarbeitet:

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

Erstellen wir einen Klick-Handler:

methods: {
	handle() {
		
	}
}

Lassen Sie uns nun im Klick-Handler die Elternfunktion aufrufen lassen. Dazu lösen wir ein Ereignis mit der Funktion $emit aus, wobei wir den Namen des ausgelösten Ereignisses als Parameter übergeben:

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

Übergeben Sie zwei Funktionen an die Kindkomponente. Erstellen Sie in der Kindkomponente zwei Schaltflächen, jede soll eine der übergebenen Funktionen aufrufen.