การปล่อยเหตุการณ์ใน 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');
}
}
ส่งฟังก์ชันสองฟังก์ชันไปยังคอมโพเนนต์ลูก สร้างปุ่มสองปุ่มในคอมโพเนนต์ลูก แต่ละปุ่มจะเรียกใช้ฟังก์ชันหนึ่งที่ส่งมา
