Vue事件传递实现原理

Vue事件传递的实现原理

Vue的事件传递机制主要依赖于$emit和$on方法，通过自定义事件实现父子组件或跨层级组件间的通信。核心原理基于发布-订阅模式（Pub/Sub），通过事件中心管理事件的注册与触发。

事件注册与触发

• $on方法：用于监听自定义事件。调用时会将事件名和对应的回调函数存储到当前组件实例的_events对象中。

  this.$on('event-name', callback)

• $emit方法：触发指定事件名的事件，并执行对应的回调函数。会遍历_events中对应事件名的回调列表，依次执行。

  this.$emit('event-name', payload)

父子组件通信

1. 父组件监听子组件事件
   父组件通过v-on（或@）在模板中直接监听子组件触发的自定义事件：

   <child-component @custom-event="handleEvent" />

   子组件内部通过this.$emit('custom-event')触发事件。

2. 跨层级组件通信
   若组件层级较深，可通过$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钩子中移除），防止内存泄漏。