Vue-də Hadisələrin Emit Edilməsi

Artıq bildiyiniz kimi, məlumatlar ana komponentlərdən uşaq komponentlərə doğru hərəkət edir. İndi gəlin görək uşaq komponentlər ana komponentlərlə necə ünsiyyət qura bilər. Bu, hadisələrin emit edilməsi vasitəsilə həyata keçirilir. Gəlin praktik olaraq baxaq.

Fərz edək ki, ana komponentdə müəyyən bir metod var:

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

Gəlin bu metodu parametr kimi uşaq komponentə ötürək:

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

Emit ediləcək hadisəni emits konfiqurasiyasında qeyd edək:

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

Gəlin indi uşaq komponentdə onun üzərinə kliklənməsi emal olunacaq bir düymə edək:

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

Gəlin klik işləyicisini edək:

methods: {
	handle() {
		
	}
}

Gəlin indi klik işləyicisində ana funksiyanın işə düşməsini təmin edək. Bunun üçün $emit funksiyasından istifadə edərək bir hadisə emit edək, onun parametrində emit ediləcək hadisənin adını göstərək:

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

Uşaq komponentə iki funksiya ötürün. Uşaq komponentdə ikisi də ötürülən funksiyalardan birini işə salacaq iki düymə edin.