การปล่อยเหตุการณ์ใน Vue

อย่างที่คุณทราบแล้ว ข้อมูลจะเคลื่อนที่จากคอมโพเนนต์พ่อแม่ไปยังคอมโพเนนต์ลูก ตอนนี้เรามาดูกันว่าคอมโพเนนต์ลูกสามารถสื่อสารกับคอมโพเนนต์พ่อแม่ได้อย่างไร สิ่งนี้ทำได้โดยการปล่อยเหตุการณ์ มาดูกันในทางปฏิบัติ

สมมติว่าในคอมโพเนนต์พ่อแม่มีเมธอดบางอย่าง:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

เราจะส่งเมธอดนี้เป็นพารามิเตอร์ไปยังคอมโพเนนต์ลูก:

App.vue<template>
  <User @show="func" />
</template>

เราจะกำหนดเหตุการณ์ที่ปล่อยออกมาในการตั้งค่า emits:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

ตอนนี้ในคอมโพเนนต์ลูก เราจะสร้างปุ่มที่จัดการกับการคลิกบนมัน:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

เราจะสร้างตัวจัดการการคลิก:

components/User.vuemethods: {
  handle() {
    
  }
}

ตอนนี้ในตัวจัดการการคลิก เราจะทำให้ฟังก์ชันของพ่อแม่ถูกเรียก เพื่อทำสิ่งนี้ เราจะปล่อยเหตุการณ์โดยใช้ฟังก์ชัน $emit โดยกำหนดชื่อเหตุการณ์ที่ปล่อยเป็นพารามิเตอร์:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}