Emissão de Eventos no Vue

Como você já sabe, os dados fluem de componentes pai para componentes filhos. Agora vamos ver como os componentes filhos podem se comunicar com os componentes pai. Isso é feito através da emissão de eventos. Vamos ver na prática.

Suponha que no componente pai haja algum método:

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

Vamos passar esse método como parâmetro para o componente filho:

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

Vamos registrar o evento emitido na opção emits:

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

Agora, vamos fazer no componente filho um botão que irá processar o clique nele:

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

Vamos fazer o manipulador de clique:

methods: {
	handle() {
		
	}
}

Agora, no manipulador de clique, vamos fazer com que a função pai seja chamada. Para isso, emitimos um evento usando a função $emit, passando como parâmetro o nome do evento emitido:

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

Passe para o componente filho duas funções. Faça no componente filho dois botões, cada um deles chamará uma das funções passadas.