vue $emit实现原理
Vue $emit 实现原理
Vue 的 $emit 方法是实现组件间通信的核心机制之一，主要用于子组件向父组件传递事件和数据。其实现原理主要基于 Vue 的事件系统和发布-订阅模式。
事件注册与监听
在 Vue 中，父组件通过 v-on 或 @ 语法监听子组件触发的事件。例如：
<child-component @custom-event="handleEvent"></child-component>子组件内部通过 $emit 触发事件时，父组件的 handleEvent 方法会被调用。
$emit 的源码实现
Vue 的 $emit 方法定义在 Vue.prototype 上，核心逻辑如下：
- 事件触发：
$emit方法接收事件名称和可选参数，遍历当前实例的_events属性（存储事件监听器的对象），找到匹配的事件回调函数。 - 执行回调：遍历回调函数列表，依次执行并传入参数。回调函数通过
apply或call绑定当前 Vue 实例的上下文。
简化版源码逻辑：
Vue.prototype.$emit = function (event) {
const vm = this;
let cbs = vm._events[event];
if (cbs) {
const args = Array.prototype.slice.call(arguments, 1);
for (let i = 0; i < cbs.length; i++) {
cbs[i].apply(vm, args);
}
}
return vm;
};发布-订阅模式
$emit 的实现本质是发布-订阅模式：
- 订阅：父组件通过
v-on订阅子组件的事件。 - 发布：子组件通过
$emit发布事件，触发父组件的回调。
事件修饰符支持
Vue 对 $emit 的事件名支持自动转换：
- 驼峰命名（
customEvent）会被转换为短横线命名（custom-event），以兼容 HTML 大小写不敏感的特性。
与 $on 和 $off 的关系
$on：用于手动监听事件，将回调函数存入_events对象。$off：移除事件监听器。$emit与$on配合，构成完整的事件系统。
总结
$emit 的核心是通过事件名称从 _events 中查找并执行对应的回调函数，实现组件间的通信。其设计简洁高效，是 Vue 组件化的重要基础。
