Vue事件传递实现原理
Vue事件传递的实现原理
Vue的事件传递机制主要依赖于$emit和$on方法，通过自定义事件实现父子组件或跨层级组件间的通信。核心原理基于发布-订阅模式（Pub/Sub），通过事件中心管理事件的注册与触发。
事件注册与触发
$on方法：用于监听自定义事件。调用时会将事件名和对应的回调函数存储到当前组件实例的_events对象中。this.$on('event-name', callback)$emit方法：触发指定事件名的事件，并执行对应的回调函数。会遍历_events中对应事件名的回调列表，依次执行。this.$emit('event-name', payload)
父子组件通信
-
父组件监听子组件事件
父组件通过v-on（或@）在模板中直接监听子组件触发的自定义事件：
<child-component @custom-event="handleEvent" />子组件内部通过
this.$emit('custom-event')触发事件。 -
跨层级组件通信
若组件层级较深，可通过$attrs和$listeners传递事件（Vue 2.x），或直接使用provide/inject结合事件总线（Event Bus）实现跨级通信。
事件总线（Event Bus）
通过创建一个空的Vue实例作为中央事件总线，实现任意组件间的通信：
const bus = new Vue()
// 组件A监听事件
bus.$on('event', callback)
// 组件B触发事件
bus.$emit('event', data)Vue 3的变化
Vue 3中移除了$on、$off等方法，推荐使用mitt等第三方库替代事件总线模式，或直接依赖provide/inject与setup中的emit函数。
注意事项
- 事件名建议使用kebab-case（如
my-event），避免与原生DOM事件冲突。 - 及时销毁事件监听（Vue 2.x中通过
$off或在beforeDestroy钩子中移除），防止内存泄漏。
