Emisión de eventos en Vue

Como ya sabes, los datos fluyen de los componentes padres a los hijos. Ahora veamos cómo los componentes hijos pueden comunicarse con los padres. Esto se hace mediante la emisión de eventos. Veámoslo en la práctica.

Supongamos que en el componente padre hay algún método:

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

Pasemos este método como parámetro al componente hijo:

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

Registremos el evento emitido en la opción emits:

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

Ahora hagamos en el componente hijo un botón que maneje el clic sobre él:

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

Hagamos un manejador del clic:

methods: {
	handle() {
		
	}
}

Ahora hagamos que en el manejador del clic se ejecute la función del padre. Para ello, emitamos un evento usando la función $emit, especificando como parámetro el nombre del evento emitido:

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

Pasa al componente hijo dos funciones. Haz en el componente hijo dos botones, cada uno de los cuales ejecutará una de las funciones pasadas.