摘要

emit 是子元件向父元件發送事件的機制。透過 emit，子元件可以通知父元件某些事情發生了，並可以攜帶資料。這是 Vue 中實現「子傳父」通訊的標準方式。

定義與說明

emit 的作用：

emit 允許子元件觸發自訂事件，父元件可以監聽這些事件並作出回應。這是一種向上通知的機制，常用於：

• 通知父元件狀態改變
• 傳遞表單提交的資料
• 請求父元件執行某些操作

使用方式：

在 <script setup> 中使用 defineEmits 定義事件，然後在需要的時候調用 emit 函數觸發事件。父元件使用 v-on 或 @ 語法監聽這些事件。

實作範例

ChildComponent.vue (子元件)

<script setup>
// 定義可以發送的事件
const emit = defineEmits(['update', 'delete']);

function handleUpdate() {
  // 發送 update 事件，並傳遞資料
  emit('update', { status: 'completed' });
}

function handleDelete() {
  // 發送 delete 事件
  emit('delete');
}
</script>

<template>
  <div class="actions">
    <button @click="handleUpdate">更新狀態</button>
    <button @click="handleDelete">刪除</button>
  </div>
</template>

ParentComponent.vue (父元件)

<script setup>
function onUpdate(data) {
  console.log('狀態更新：', data.status);
}

function onDelete() {
  console.log('刪除請求');
}
</script>

<template>
  <ChildComponent
    @update="onUpdate"
    @delete="onDelete"
  />
</template>

結論

emit 機制與 props 相輔相成，共同構成了 Vue 元件間的雙向通訊系統。props 負責向下傳遞資料，emit 負責向上傳遞事件。這種清晰的資料流向有助於維護程式碼的可預測性和可維護性。

emit 子傳父事件機制