Gebeurtenissen emitteren in Vue

Zoals je al weet, bewegen gegevens van parent componenten naar child componenten. Laten we nu eens kijken hoe child componenten kunnen communiceren met parent componenten. Dit wordt gedaan door het emitteren van gebeurtenissen. Laten we dit in de praktijk bekijken.

Stel dat in het parent component een bepaalde methode is:

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

Laten we deze methode als parameter doorgeven aan het child component:

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

Laten we de geëmitteerde gebeurtenis in de optie emits zetten:

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

Laten we nu in het child component een knop maken, die een klik erop zal verwerken:

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

Laten we een klikhandler maken:

methods: {
	handle() {
		
	}
}

Laten we nu in de klikhandler ervoor zorgen dat de parent functie wordt aangeroepen. Om dit te doen emitteren we een gebeurtenis met de functie $emit, en geven de naam van de geëmitteerde gebeurtenis door als parameter:

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

Geef twee functies door aan het child component. Maak in het child component twee knoppen, elk van hen zal een van de doorgegeven functies aanroepen.