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的原理。

Logo

前往低代码交流专区

更多推荐