Émission d'événements dans Vue

Comme vous le savez déjà, les données circulent des composants parents vers les composants enfants. Voyons maintenant comment les composants enfants peuvent communiquer avec les composants parents. Cela se fait en émettant des événements. Voyons cela en pratique.

Supposons que le composant parent ait une certaine méthode :

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

Passons cette méthode en paramètre au composant enfant :

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

Déclarons l'événement émis dans l'option emits :

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

Créons maintenant dans le composant enfant un bouton qui gérera le clic sur lui :

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

Créons un gestionnaire de clic :

methods: {
	handle() {
		
	}
}

Faisons maintenant en sorte que dans le gestionnaire de clic la fonction parent soit appelée. Pour cela, émettons un événement en utilisant la fonction $emit, en spécifiant le nom de l'événement émis comme paramètre :

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

Passez au composant enfant deux fonctions. Créez dans le composant enfant deux boutons, chacun devant appeler une des fonctions passées.