Emitowanie zdarzeń w Vue

Jak już wiesz, dane przepływają od komponentów rodzicielskich do potomnych. Przyjrzyjmy się teraz, jak komponenty potomne mogą komunikować się z rodzicielskimi. Odbywa się to za pomocą emitowania zdarzeń. Spójrzmy na praktyczny przykład.

Załóżmy, że w komponencie rodzicielskim znajduje się pewna metoda:

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

Przekażmy tę metodę jako parametr do komponentu potomnego:

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

Zadeklarujmy emitowane zdarzenie w opcji emits:

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

Stwórzmy teraz w komponencie potomnym przycisk, który będzie obsługiwał kliknięcie:

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

Stwórzmy obsługę kliknięcia:

methods: {
	handle() {
		
	}
}

Sprawmy teraz, aby w obsłudze kliknięcia wywołała się funkcja rodzicielska. Aby to zrobić, wyemitujmy zdarzenie za pomocą funkcji $emit, podając jako jej parametr nazwę emitowanego zdarzenia:

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

Przekaż do komponentu potomnego dwie funkcje. Stwórz w komponencie potomnym dwa przyciski, każdy z nich ma wywoływać jedną z przekazanych funkcji.