Emiterea evenimentelor în Vue

După cum știți deja, datele se mișcă de la componentele părinte la cele copil. Să vedem acum cum pot componentele copil să comunice cu cele părinte. Acest lucru se face prin emiterea evenimentelor. Să vedem în practică.

Să presupunem că în componenta părinte există o anumită metodă:

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

Să transmitem această metodă ca parametru în componenta copil:

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

Să scriem evenimentul emis în configurația emits:

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

Acum, în componenta copil, să facem un buton care va prelucra clicul pe el:

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

Să facem un manipulator pentru clic:

methods: {
	handle() {
		
	}
}

Acum, în manipulatorul de clic, să facem ca funcția părinte să fie apelată. Pentru aceasta, emitem un eveniment folosind funcția $emit, indicând ca parametru al ei numele evenimentului emis:

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

Transmiteți în componenta copil două funcții. Faceți în componenta copil două butoane, fiecare dintre ele va apela una dintre funcțiile transmise.