Emissione di eventi in Vue

Come già sapete, i dati fluiscono dai componenti genitori ai componenti figli. Ora vediamo come i componenti figli possono comunicare con quelli genitori. Questo viene fatto emettendo eventi. Vediamo come nella pratica.

Supponiamo che nel componente genitore ci sia un metodo:

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

Passiamo questo metodo come parametro al componente figlio:

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

Registriamo l'evento emesso nella opzione emits:

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

Ora creiamo nel componente figlio un pulsante che gestirà il click su di esso:

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

Creiamo il gestore del click:

methods: {
	handle() {
		
	}
}

Ora facciamo in modo che nel gestore del click venga chiamata la funzione genitore. Per fare questo emettiamo un evento utilizzando la funzione $emit, specificando come suo parametro il nome dell'evento emesso:

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

Passa al componente figlio due funzioni. Crea nel componente figlio due pulsanti, ciascuno dei quali richiamerà una delle funzioni passate.