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 事件机制脑图”或“快速参考表”吗？