vue源码解析:vue事件方法之$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的原理。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值