Vue中的情侣属性$dispatch和$broadcast详解

// 创建一个 parent 组件
var parent = new Vue();

// 创建一个 child1 组件，其父组件指向 parent
var child1 = new Vue({ parent: parent });

// 创建一个 child2 组件，其父组件指向 child1
var child2 = new Vue({ parent: child1 });

// 在 parent 组件监听名为 test 的事件，并绑定了一个回调函数
parent.$on('test', function () {
 console.log('parent notified');
});

// 在 child1 组件监听名为 test 的事件，并绑定了一个回调函数
child1.$on('test', function () {
 console.log('child1 notified');
});

// 在 child2 组件监听名为 test 的事件，并绑定了一个回调函数
child2.$on('test', function () {
 console.log('child2 notified');
});

// 在 child2 组件中通过 dispatch 触发 test 事件
child2.$dispatch('test');

// 事件执行会输出如下结果
// -> "child2 notified"
// -> "child1 notified"

/**
 * Recursively propagate an event up the parent chain.
 * 递归地在父链上传播事件。
 * @param {String} event
 * @param {...*} additional arguments
 */
// $dispatch 方法是定义在 Vue 的 prototype 上的
// 接受一个字符串类型的事件名称
Vue.prototype.$dispatch = function (event) {
 // 首先执行 $emit 触发事件，将返回值保存在 shouldPropagate 中
 var shouldPropagate = this.$emit.apply(this, arguments)
 
 // 如果首次执行的 $emit 方法返回的值不是 true 就直接返回
 // 如果返回值不是 true 就说明组件逻辑不希望事件继续往父组件进行传递
 if (!shouldPropagate) return
 
 // 如果首次执行 $emit 方法返回值是 true 就获取当前组件的 parent 组件实例
 var parent = this.$parent
 
 // 将函数接受的参数转换成数组
 var args = toArray(arguments)
 
 // use object event to indicate non-source emit on parents
 // 根据传入的事件名称的参数组装成 object
 args[0] = { name: event, source: this }
 
 // 循环知道组件的父组件
 while (parent) {
 // 在父组件中执行 $emit 触发事件
 shouldPropagate = parent.$emit.apply(parent, args)
 
 // 如果父组件 $emit 返回的是 true 就继续递归祖父组件，否则就停止循环
 parent = shouldPropagate ? parent.$parent : null
 }
 
 // 最后返回当前组件实例
 return this
}

// 定义 dispatch 方法，接受三个参数，分别是：组件名称、将要触发的事件名称、回调函数传递的参数
dispatch(componentName, eventName, params) {
 // 获取基于当前组件的父组件实例，这里对父组件实例和根组件实例做了兼容处理
 var parent = this.$parent || this.$root;
 
 // 通过父组件的 $option 属性获取组件的名称
 var name = parent.$options.componentName;

 // 当相对当前组件的父组件实例存在，而且当父组件的名称不存在或者父组件的名称不等于传入的组件名称时，执行循环
 while (parent && (!name || name !== componentName)) {
 // 记录父组件的父组件
 parent = parent.$parent;

 // 当父组件的父组件存在时，获取祖父组件的名称
 if (parent) {
  name = parent.$options.componentName;
 }
 }
 
 // 当循环结束是，parent 的值就是最终匹配的组件实例
 if (parent) {
 // 当 parent 值存在时调用 $emit 方法
 // 传入 parent 实例、事件名称与 params 参数组成的数组
 // 触发传入事件名称 eventName 同名的事件
 parent.$emit.apply(parent, [eventName].concat(params));
 }
}

// 创建 parent 组件实例
var parent = new Vue()

// 创建 child1 组件实例，其父组件指向 parent
var child1 = new Vue({ parent: parent })

// 创建 child2 组件实例，其父组件指向 parent
var child2 = new Vue({ parent: parent })

// 创建 child3 组件实例，其父组件指向 child2
var child3 = new Vue({ parent: child2 })

// 在 child1 组件监听名为 test 的事件，并绑定了一个回调函数
child1.$on('test', function () {
 console.log('child1 notified')
})

// 在 child2 组件监听名为 test 的事件，并绑定了一个回调函数
child2.$on('test', function () {
 console.log('child2 notified')
})

// 在 child3 组件监听名为 test 的事件，并绑定了一个回调函数
child3.$on('test', function () {
 console.log('child3 notified')
})

parent.$broadcast('test')
// -> "child1 notified"
// -> "child2 notified"

/**
 * Recursively broadcast an event to all children instances.
 * 递归地向所有子实例广播事件。
 * @param {String|Object} event
 * @param {...*} additional arguments
 */
// $dispatch 方法是定义在 Vue 的 prototype 上的
// 接受一个事件
Vue.prototype.$broadcast = function (event) {
 // 获取传入事件的类型，判断是否为字符串
 var isSource = typeof event === 'string'
 
 // 校正 event 的值，当接受 event 的类型为字符串时就直接使用，如果不是字符串就使用 event 上的 name 属性 
 event = isSource ? event : event.name
 
 // if no child has registered for this event,
 // then there's no need to broadcast.
 // 如果当前组件的子组件没有注册该事件，就直接返回，并不用 broadcast
 if (!this._eventsCount[event]) return
 
 // 获取当前组件的子组件
 var children = this.$children
 
 // 将函数接受的参数转换成数组
 var args = toArray(arguments)
 
 // 如果传入事件为字符串
 if (isSource) {
  // use object event to indicate non-source emit
  // on children
  // 根据传入的事件名称的参数组装成 object
  args[0] = { name: event, source: this }
 }
 
 // 循环子组件
 for (var i = 0, l = children.length; i < l; i++) {
  var child = children[i]
  
  // 在每个子组件中调用 $emit 触发事件
  var shouldPropagate = child.$emit.apply(child, args)
  
  // 判断调用 $emit 返回的值是否为 true
  if (shouldPropagate) {
   // 如果调用 $emit 返回的值为 true，就递归孙子组件继续广播
   child.$broadcast.apply(child, args)
  }
 }
 
 // 最后返回当前组件的实例
 return this
}

// 定义 broadcast 方法，接受三个参数，分别是：组件名称、将要触发的事件名称、回调函数传递的参数
function broadcast(componentName, eventName, params) {
 // 依次循环当前组件的子组件
 this.$children.forEach(child => {
  // 获取每个子组件的名字
  var name = child.$options.componentName;

  // 判断子组件的名字是否等于传入的组件名称
  if (name === componentName) {
   // 如果子组件的名字等于传入的组件名称就调用 $emit 触发事件
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   // 如果子组件的名字不等于传入的组件名称就递归遍历调用 broadcast 孙子组件
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}