前兩天介紹的 props 是父元件向子元件傳遞資料的方式，若子元件要將更新的狀態傳回父元件，則需要透過 event 觸發父元件的更新。

子元件向父元件傳遞事件

當資料被更新時，透過使用 this.$emit('事件名稱' , 參數) 來觸發事件，通知父元件更新狀態，而不是由子元件直接更新父元件。

子元件如何觸發事件？

在<script setup>標籤中，元件可以透過使用 defineEmits()來定義要觸發的事件。

<script setup>
   const emit = defineEmits(['inFocus', 'submit'])
   
   // 實際觸發事件
   function triggerSubmit() {
     emit('submit', { data: 'some data' })
   }
</script>

若是使用 Options API，元件透過 emits 來定義要觸發的事件。

以下是官方文件的範例 (Options API)

export default {
  emits: ['inFocus', 'submit']
}

父元件如何監聽並處理事件？

透過使用 v-on (或簡寫 @)監聽並處理事件。

<script setup>
function handleCustomEvent(payload) {
  console.log("收到子元件的資料:", payload)
}
</script>

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

事件驗證

將觸發的事件進行驗證，確保傳遞的參數符合要求。

<script setup>
const emit = defineEmits({
  // 無驗證
  click: null,
  
  // 有驗證的事件
  submit: (payload) => {
    if (payload && payload.email) {
      return true
    } else {
      console.warn('submit 事件必須包含 email 屬性')
      return false
    }
  }
})

function handleSubmit() {
  // 這會通過驗證
  emit('submit', { email: 'user@example.com' })
  
  // 這會觸發警告
  // emit('submit', { name: 'John' })
}
</script>

參考資源

https://book.vue.tw/CH2/2-2-communications.html
https://zh-hk.vuejs.org/guide/components/events.html