2022-07-05在组件（当前组件实例）的执行原理

2022-07-05

Vue.prototype.$on = function (event, fn) {
  const hookRE = /^hook:/    //检测自定义事件名是否是hook:开头
  
  const vm = this
  if (Array.isArray(event)) {  // 如果第一个参数是数组
    for (let i = 0; i < event.length; i++) {
      this.$on(event[i], fn)  // 递归
    }
  } else {
    (vm._events[event] || (vm._events[event] = [])).push(fn)
    // 如果有对应事件名就push，没有创建为空数组然后push
    
    if (hookRE.test(event)) {  // 如果是hook:开头
      vm._hasHookEvent = true  // 标志位为true
    }
  }
  return vm
}

Vue.prototype.$emit = function (event) {
  const vm = this
  let cbs = vm._events[event]  // 找到事件名对应的回调集合
  if (cbs) {
    const args = toArray(arguments, 1)  // 将附加参数转为数组
    
    for (let i = 0; i < cbs.length; i++) {
      cbs[i].apply(vm, args)  // 挨个执行对应的回调集合
    }
  }
  return vm
}

在组件（当前组件实例）的$on和$emit的执行原理：

$on往当前组件实例的事件中心（this._events）添加自定义事件

$emit在事件中心找到对应的自定义事件后调用事件

父子组件通过@传递事件详解：

父组件在编译模板后将子组件（@自定义事件=”回调”）的自定义事件及其回调通过$on添加到子组件的事件中心（this._events）

vue的$emit和$on特性可用于同级组件的传信（如果不想使用vuex可采用此方法）

同级组件传信原理：

  

      
{{msg}}
  


export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后派发事件'
      }
  },
  created () {
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
      }
  }
}

当点击时可以调用wash_Goods这个事件，

如果在同级组件之间都引用一个名为bus.js

// bus.js
const Vue import 'vue'
export default new Vue()

要通信的每个组件都引用

import Bus from ./bus.js

然后就可以通过Bus.$on(‘事件名’, 事件)添加事件和Bus.$emit(‘事件名’, 参数)来进行相互通信了

分类：

技术点：

相关文章：