Vue-те оқиғалар шығару

Сіз білетіндей, деректер ата-ана компоненттерден балаларға қарай жылжиды. Енді бала компоненттердің ата-аналармен қалай байланыса алатынын қарастырайық. Бұл оқиғалар шығару арқылы жасалады. Тәжірибеде қарастырайық.

Ата-ана компонентте қандай да бір әдіс бар делік:

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

Бұл әдісті параметр ретінде бала компонентке берейік:

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

Шығарылатын оқиғаны emits баптауында жазайық:

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

Енді бала компонентте оны басуға өңдейтін батырма жасайық:

<template>
	<button @click="handle">батырма</button>
</template>

Басу өңдегішін жасайық:

methods: {
	handle() {
		
	}
}

Енді басу өңдегішінде ата-ана әдісінің орындалуын іске қосамыз. Ол үшін $emit функциясын қолданып оқиға шығарамыз, оның параметрі ретінде шығарылатын оқиғаның атауын көрсетеміз:

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

Бала компонентке екі функция беріңіз. Бала компонентте екі батырма жасаңыз, әрқайсысы берілген функциялардың бірін шақырады.