Emitovanie udalostí vo Vue

Ako už viete, dáta prúdia od nadradených komponentov k podradeným. Pozrime sa teraz, ako môžu podradené komponenty komunikovať s nadradenými. Robí sa to pomocou emitovania udalostí. Pozrime sa na to v praxi.

Nech v nadradenom komponente je nejaká metóda:

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

Odovzdajme túto metódu ako parameter do podradeného komponentu:

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

Zapíšme emitovanú udalosť v nastavení emits:

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

Urobme teraz v podradenom komponente tlačidlo, ktoré bude spracúvať klik naň:

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

Urobme obsluhu kliknutia:

methods: {
	handle() {
		
	}
}

Teraz v obsluhe kliknutia spôsobme, aby sa zavolala nadradená funkcia. Na to emitnime udalosť pomocou funkcie $emit, ako jej parameter uvedieme názov emitovanej udalosti:

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

Odovzdajte do podradeného komponentu dve funkcie. Urobte v podradenom komponente dve tlačidlá, každé z nich bude volať jednu z odovzdaných funkcií.