// 創建一個 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]));
  }
 });
}