Vue中的情侶屬性$dispatch和$broadcast詳解

// 創(chuàng)建一個 parent 組件
var parent = new Vue();

// 創(chuàng)建一個 child1 組件，其父組件指向 parent
var child1 = new Vue({ parent: parent });

// 創(chuàng)建一個 child2 組件，其父組件指向 child1
var child2 = new Vue({ parent: child1 });

// 在 parent 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
parent.$on('test', function () {
 console.log('parent notified');
});

// 在 child1 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
child1.$on('test', function () {
 console.log('child1 notified');
});

// 在 child2 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
child2.$on('test', function () {
 console.log('child2 notified');
});

// 在 child2 組件中通過 dispatch 觸發(fā) test 事件
child2.$dispatch('test');

// 事件執(zhí)行會輸出如下結(jié)果
// -> "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) {
 // 首先執(zhí)行 $emit 觸發(fā)事件，將返回值保存在 shouldPropagate 中
 var shouldPropagate = this.$emit.apply(this, arguments)
 
 // 如果首次執(zhí)行的 $emit 方法返回的值不是 true 就直接返回
 // 如果返回值不是 true 就說明組件邏輯不希望事件繼續(xù)往父組件進(jìn)行傳遞
 if (!shouldPropagate) return
 
 // 如果首次執(zhí)行 $emit 方法返回值是 true 就獲取當(dāng)前組件的 parent 組件實例
 var parent = this.$parent
 
 // 將函數(shù)接受的參數(shù)轉(zhuǎn)換成數(shù)組
 var args = toArray(arguments)
 
 // use object event to indicate non-source emit on parents
 // 根據(jù)傳入的事件名稱的參數(shù)組裝成 object
 args[0] = { name: event, source: this }
 
 // 循環(huán)知道組件的父組件
 while (parent) {
 // 在父組件中執(zhí)行 $emit 觸發(fā)事件
 shouldPropagate = parent.$emit.apply(parent, args)
 
 // 如果父組件 $emit 返回的是 true 就繼續(xù)遞歸祖父組件，否則就停止循環(huán)
 parent = shouldPropagate ? parent.$parent : null
 }
 
 // 最后返回當(dāng)前組件實例
 return this
}

// 定義 dispatch 方法，接受三個參數(shù)，分別是：組件名稱、將要觸發(fā)的事件名稱、回調(diào)函數(shù)傳遞的參數(shù)
dispatch(componentName, eventName, params) {
 // 獲取基于當(dāng)前組件的父組件實例，這里對父組件實例和根組件實例做了兼容處理
 var parent = this.$parent || this.$root;
 
 // 通過父組件的 $option 屬性獲取組件的名稱
 var name = parent.$options.componentName;

 // 當(dāng)相對當(dāng)前組件的父組件實例存在，而且當(dāng)父組件的名稱不存在或者父組件的名稱不等于傳入的組件名稱時，執(zhí)行循環(huán)
 while (parent && (!name || name !== componentName)) {
 // 記錄父組件的父組件
 parent = parent.$parent;

 // 當(dāng)父組件的父組件存在時，獲取祖父組件的名稱
 if (parent) {
  name = parent.$options.componentName;
 }
 }
 
 // 當(dāng)循環(huán)結(jié)束是，parent 的值就是最終匹配的組件實例
 if (parent) {
 // 當(dāng) parent 值存在時調(diào)用 $emit 方法
 // 傳入 parent 實例、事件名稱與 params 參數(shù)組成的數(shù)組
 // 觸發(fā)傳入事件名稱 eventName 同名的事件
 parent.$emit.apply(parent, [eventName].concat(params));
 }
}

// 創(chuàng)建 parent 組件實例
var parent = new Vue()

// 創(chuàng)建 child1 組件實例，其父組件指向 parent
var child1 = new Vue({ parent: parent })

// 創(chuàng)建 child2 組件實例，其父組件指向 parent
var child2 = new Vue({ parent: parent })

// 創(chuàng)建 child3 組件實例，其父組件指向 child2
var child3 = new Vue({ parent: child2 })

// 在 child1 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
child1.$on('test', function () {
 console.log('child1 notified')
})

// 在 child2 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
child2.$on('test', function () {
 console.log('child2 notified')
})

// 在 child3 組件監(jiān)聽名為 test 的事件，并綁定了一個回調(diào)函數(shù)
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 的值，當(dāng)接受 event 的類型為字符串時就直接使用，如果不是字符串就使用 event 上的 name 屬性 
 event = isSource ? event : event.name
 
 // if no child has registered for this event,
 // then there's no need to broadcast.
 // 如果當(dāng)前組件的子組件沒有注冊該事件，就直接返回，并不用 broadcast
 if (!this._eventsCount[event]) return
 
 // 獲取當(dāng)前組件的子組件
 var children = this.$children
 
 // 將函數(shù)接受的參數(shù)轉(zhuǎn)換成數(shù)組
 var args = toArray(arguments)
 
 // 如果傳入事件為字符串
 if (isSource) {
  // use object event to indicate non-source emit
  // on children
  // 根據(jù)傳入的事件名稱的參數(shù)組裝成 object
  args[0] = { name: event, source: this }
 }
 
 // 循環(huán)子組件
 for (var i = 0, l = children.length; i < l; i++) {
  var child = children[i]
  
  // 在每個子組件中調(diào)用 $emit 觸發(fā)事件
  var shouldPropagate = child.$emit.apply(child, args)
  
  // 判斷調(diào)用 $emit 返回的值是否為 true
  if (shouldPropagate) {
   // 如果調(diào)用 $emit 返回的值為 true，就遞歸孫子組件繼續(xù)廣播
   child.$broadcast.apply(child, args)
  }
 }
 
 // 最后返回當(dāng)前組件的實例
 return this
}

// 定義 broadcast 方法，接受三個參數(shù)，分別是：組件名稱、將要觸發(fā)的事件名稱、回調(diào)函數(shù)傳遞的參數(shù)
function broadcast(componentName, eventName, params) {
 // 依次循環(huán)當(dāng)前組件的子組件
 this.$children.forEach(child => {
  // 獲取每個子組件的名字
  var name = child.$options.componentName;

  // 判斷子組件的名字是否等于傳入的組件名稱
  if (name === componentName) {
   // 如果子組件的名字等于傳入的組件名稱就調(diào)用 $emit 觸發(fā)事件
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   // 如果子組件的名字不等于傳入的組件名稱就遞歸遍歷調(diào)用 broadcast 孫子組件
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}