Emisi Event di Vue

Seperti yang sudah Anda ketahui, data bergerak dari komponen induk ke komponen anak. Sekarang mari kita lihat bagaimana komponen anak dapat berkomunikasi dengan komponen induk. Hal ini dilakukan dengan memancarkan event. Mari kita lihat dalam praktiknya.

Misalkan dalam komponen induk terdapat suatu metode:

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

Mari teruskan metode ini sebagai parameter ke komponen anak:

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

Tuliskan event yang dipancarkan dalam pengaturan emits:

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

Sekarang mari di komponen anak buat tombol yang akan menangani klik padanya:

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

Buat penangan klik (click handler):

methods: {
	handle() {
		
	}
}

Sekarang mari di penangan klik buat fungsi induk terpanggil. Untuk itu, pancarkan event menggunakan fungsi $emit, dengan parameter berupa nama event yang dipancarkan:

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

Teruskan dua fungsi ke komponen anak. Buat di komponen anak dua tombol, masing-masing akan memanggil salah satu fungsi yang diteruskan.