vue源码解析:vue事件方法之$emit方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$emit在我们做子组件向父组件传值时,通常会用到,那么$emit的内部实现原理是什么呢?下面我们来详细说下$emit:vm.$emit( eventName, […args] )参数:{string} eventName 触发的事件名[...args] 传递给事件的参数作用: 触发当前实例上的事件。附加参数都会传给监听器回调。内部原理:$emit也
·
vue中事件方法一共就四个,挂载在vue实例上的$emit在我们做子组件向父组件传值时,通常会用到,那么$emit的内部实现原理是什么呢?下面我们来详细说下$emit:
vm.$emit( eventName, […args] )
- 参数:
{string} eventName 触发的事件名
[...args] 传递给事件的参数
- 作用: 触发当前实例上的事件。附加参数都会传给监听器回调。
- 内部原理:
$emit也是采用了发布订阅者设计模式。
Vue.prototype.$emit = function (event: string): Component {
const vm: Component = this
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
for (let i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(vm, args)
} catch (e) {
handleError(e, vm, `event handler for "${event}"`)
}
}
}
return vm
}
}
根据传入的事件名从当前实例的_events
属性(即事件中心)中获取到该事件名所对应的回调函数cbs,
然后再获取传入的附加参数args,
由于cbs
是一个数组,所以遍历该数组,拿到每一个回调函数,执行回调函数并将附加参数args
传给该回调。
就是这么简单,这就是$emit的原理。
更多推荐
已为社区贡献10条内容
所有评论(0)