摘要

與 props 類似，emit 也支援型別檢查和驗證機制。這可以確保子元件發送的事件資料符合父元件的預期，提高程式碼的可靠性。

定義與說明

型別檢查：

使用物件語法定義 emit 時，可以指定每個事件的參數型別。這樣可以在開發時期就捕捉到型別錯誤。

驗證機制：

可以為每個事件定義一個驗證函數，在事件觸發時檢查參數是否符合要求。如果驗證失敗，Vue 會在開發模式下發出警告。

實作範例

TodoItem.vue

<script setup>
const emit = defineEmits({
  // 基本型別檢查
  'update': (newStatus) => {
    if (!newStatus || typeof newStatus !== 'string') {
      console.warn('update 事件必須提供字串型別的狀態');
      return false;
    }
    return true;
  },

  // 複雜的驗證邏輯
  'submit': (payload) => {
    if (!payload || typeof payload !== 'object') {
      console.warn('submit 事件必須提供一個物件');
      return false;
    }

    const { title, completed } = payload;
    
    if (!title || typeof title !== 'string') {
      console.warn('title 必須是非空字串');
      return false;
    }

    if (typeof completed !== 'boolean') {
      console.warn('completed 必須是布林值');
      return false;
    }

    return true;
  }
});

function updateStatus() {
  emit('update', 'completed'); // ✅ 通過驗證
  emit('update', 123); // ❌ 驗證失敗
}

function submitTodo() {
  emit('submit', {
    title: '完成作業',
    completed: false
  }); // ✅ 通過驗證

  emit('submit', {
    title: '',
    completed: 'yes'
  }); // ❌ 驗證失敗
}
</script>

<template>
  <div class="todo-item">
    <button @click="updateStatus">更新狀態</button>
    <button @click="submitTodo">提交待辦</button>
  </div>
</template>

結論

為 emit 事件添加型別檢查和驗證機制，可以讓元件間的通訊更加安全可靠。這些檢查在開發階段就能發現潛在的問題，避免它們在生產環境中造成意外。同時，這些定義也能作為元件的文件，幫助其他開發者正確使用你的元件。

型別檢查驗證機制開發安全