Vue 的事件機制主要包含以下幾種類型和方式，可以分為組件內部事件、父子組件通信事件、原生 DOM 事件封裝、修飾符增強等，下面詳細分類介紹：

---

一、DOM 事件綁定（最基礎的事件）

使用 v-on（或簡寫 @）指令綁定原生 DOM 事件。

<button @click="handleClick">點擊我</button>

---

二、自定義事件（組件通信）

1. 子組件通過 $emit 向父組件傳遞事件

子組件中：

<template><button @click="$emit('custom-event', data)">發送事件</button>
</template>

父組件中：

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

---

2. 使用 v-model 進行雙向綁定（語法糖）

Vue3 中可以綁定自定義 modelValue 和 update:modelValue：

子組件：

<template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {props: ['modelValue']
}
</script>

父組件：

<ChildComponent v-model="inputValue" />

---

三、事件修飾符

Vue 為事件添加了很多修飾符，用于增強行為：

• .stop：阻止事件冒泡

• .prevent：阻止默認行為

• .capture：使用事件捕獲模式

• .self：只有事件是從綁定元素本身觸發才觸發

• .once：事件只觸發一次

• .passive：使用被動監聽器，適合滾動性能優化

<button @click.stop.prevent="handleClick">點我</button>

---

四、鍵盤事件修飾符

<input @keyup.enter="submit" />

還支持 .esc, .tab, .delete, .arrow-up, .space 等等。

---

五、事件代理（原生方式）

在 Vue 中仍然可以使用事件代理：

<ul @click="handleListClick"><li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</li>
</ul>

---

六、$on / $off / $emit（Vue2 中的全局事件總線）

Vue2 可以通過事件總線實現跨組件通信：

// event-bus.js
export const EventBus = new Vue();// 發送事件
EventBus.$emit('someEvent', data);// 接收事件
EventBus.$on('someEvent', data => { ... });// 移除事件
EventBus.$off('someEvent');

?? Vue3 中已經廢棄 $on / $off / $emit，推薦使用 mitt 或 emitter 等庫替代。

---

七、Vue3 中的事件通信方式

Vue3 推薦使用以下方式進行事件通信：

• defineEmits()（組合式 API）

• mitt 第三方事件庫

• provide/inject

• Pinia 或 Vuex 狀態管理

• emits 選項配合 defineProps

// 子組件
const emit = defineEmits(['save']);
emit('save', payload);

---

八、自定義指令事件

Vue 允許你通過自定義指令實現特殊事件處理邏輯：

app.directive('click-outside', {mounted(el, binding) {document.addEventListener('click', (e) => {if (!el.contains(e.target)) {binding.value(e)}});}
});

---

需要我幫你整理一個“Vue 事件機制腦圖”或“快速參考表”嗎？