Sündmuste Emiteerimine Vue-s

Nagu te juba teate, liiguvad andmed vanemkomponentidelt lastele. Vaatame nüüd, kuidas lapskomponendid saavad suhelda vanemkomponentidega. Seda tehakse sündmuste emiteerimise abil. Vaatame seda praktikas.

Oletame, et vanemkomponendis on mingi meetod:

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

Edastame selle meetodi parameetrina lapskomponenti:

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

Kirjutame emiteeritava sündmuse seadistusse emits:

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

Teeme nüüd lapskomponendis nupu, mis töötleb sellele klõpsamist:

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

Teeme klõpsu töötleja:

methods: {
	handle() {
		
	}
}

Paneme nüüd klõpsu töötlejas vanemfunktsiooni käivituma. Selleks emiteerime sündmuse funktsiooni $emit abil, selle parameetriks määrates emiteeritava sündmuse nime:

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

Edastage lapskomponenti kaks funktsiooni. Tehke lapskomponendis kaks nuppu, millest igaüks kutsub ühe edastatud funktsioonidest välja.