Vue'de Olay Yayma

Bildiğiniz gibi, veriler üst bileşenlerden alt bileşenlere doğru akar. Şimdi alt bileşenlerin üst bileşenlerle nasıl iletişim kurabileceğine bakalım. Bu, olay yayma yoluyla yapılır. Pratikte görelim.

Üst bileşende bir metot olduğunu varsayalım:

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

Bu metodu bir parametre olarak alt bileşene geçirelim:

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

Yayılan olayı emits yapılandırmasında tanımlayalım:

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

Şimdi alt bileşende, üzerine tıklanmayı işleyecek bir buton yapalım:

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

Tıklama işleyicisini oluşturalım:

methods: {
	handle() {
		
	}
}

Şimdi tıklama işleyicisinde, üst fonksiyonun tetiklenmesini sağlayalım. Bunun için, $emit fonksiyonunu kullanarak bir olay yayalım, fonksiyonun parametresi olarak yayılan olayın adını belirtelim:

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

Alt bileşene iki fonksiyon geçirin. Alt bileşende iki buton yapın, her bir buton geçirilen fonksiyonlardan birini çağırsın.