// 創建一個 parent 組件var parent = new Vue();// 創建一個 child1 組件，其父組件指向 parentvar child1 = new Vue({ parent: parent });// 創建一個 child2 組件，其父組件指向 child1var 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"http:// -> "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 組件實例，其父組件指向 parentvar child1 = new Vue({ parent: parent })// 創建 child2 組件實例，其父組件指向 parentvar child2 = new Vue({ parent: parent })// 創建 child3 組件實例，其父組件指向 child2var 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"http:// -> "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]));  } });}