Емитување на настани во 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');
	}
}

Пренесете во детската компонента две функции. Направете во детската компонента две копчиња, секое од нив ќе повикува една од пренесените функции.