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');
	}
}

Бала компонентке эки функцияны өткөргүлө. Бала компонентте эки баскыч жасагыла, ар бири өткөрүлгөн функциялардын бирин чакырсын.