Излъчване на събития във Vue

Както вече знаете, данните се движат от родителски компоненти към дъщерни. Нека сега видим как дъщерните компоненти могат да общуват с родителските. Това става чрез излъчване на събития. Нека видим на практика.

Нека в родителския компонент има някакъв метод:

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

Нека предадем този метод като параметър в дъщерния компонент:

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

Нека пропишем излъчваното събитие в настройката emits:

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

Нека сега в дъщерния компонент направим бутон, който ще обработва клик върху него:

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

Нека направим обработчик на клика:

methods: {
	handle() {
		
	}
}

Нека сега в обработчика на клика накараме да се извика родителската функция. За това ще излъчим събитие с помощта на функцията $emit, като параметър й посочваме името на излъчваното събитие:

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

Предайте в дъщерния компонент две функции. Направете в дъщерния компонент два бутона, всеки от които ще извиква една от предадените функции.