Notikumu izsūtīšana Vue

Kā jūs jau zināt, dati pārvietojas no vecāku komponentēm uz meitas komponentēm. Tagad apskatīsim, kā meitas komponentes var sazināties ar vecāku komponentēm. Tas tiek darīts, izmantojot notikumu izsūtīšanu. Apskatīsim to praksē.

Pieņemsim, ka vecāka komponentē ir kāda metode:

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

Pārsūtīsim šo metodi kā parametru meitas komponentē:

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

Norādīsim izsūtāmo notikumu konfigurācijā emits:

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

Tagad meitas komponentē izveidosim pogu, kas apstrādās klikšķi uz tās:

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

Izveidosim klikšķa apstrādātāju:

methods: {
	handle() {
		
	}
}

Tagad klikšķa apstrādātājā liksim izsaukties vecāka funkcijai. Lai to izdarītu, izsūtīsim notikumu, izmantojot funkciju $emit, kuras parametrā norādot izsūtāmā notikuma nosaukumu:

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

Pārsūtiet meitas komponentē divas funkcijas. Izveidojiet meitas komponentē divas pogas, katra no tām izsauks vienu no pārsūtītajām funkcijām.