Phát sự kiện trong Vue

Như bạn đã biết, dữ liệu di chuyển từ các thành phần cha đến các thành phần con. Bây giờ hãy xem cách các thành phần con có thể giao tiếp với thành phần cha. Điều này được thực hiện thông qua việc phát sự kiện. Hãy xem trong thực tế.

Giả sử trong thành phần cha có một phương thức nào đó:

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

Hãy truyền phương thức này dưới dạng tham số vào thành phần con:

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

Hãy khai báo sự kiện được phát trong cấu hình emits:

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

Bây giờ trong thành phần con, hãy tạo một nút bấm, nó sẽ xử lý cú nhấp chuột vào nó:

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

Hãy tạo trình xử lý sự kiện nhấp chuột:

methods: {
	handle() {
		
	}
}

Bây giờ trong trình xử lý sự kiện nhấp chuột, hãy làm cho hàm của thành phần cha được gọi. Để làm điều này, hãy phát một sự kiện bằng hàm $emit, tham số của nó là tên sự kiện được phát:

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

Hãy truyền vào thành phần con hai hàm. Trong thành phần con, hãy tạo hai nút bấm, mỗi nút sẽ gọi một trong các hàm đã được truyền.