摘要：是一個(gè)事件，它向下傳播到當(dāng)前實(shí)例的所有后代。由于后代擴(kuò)展為多個(gè)子樹(shù)，事件傳播將會(huì)遵循許多不同的路徑。組件修改實(shí)現(xiàn)遞歸地在父鏈上傳播事件。

父子組件通信

父?jìng)髯?props屬性
子傳父 $emit事件

這兩種官方文檔里有很詳細(xì)的介紹就不解釋了
還是舉個(gè)栗子：

//parent.vue父組件

//子組件SON
//單項(xiàng)數(shù)據(jù)流，父給子綁定一個(gè)事件

*

多層級(jí)傳遞數(shù)據(jù)

$dispatch 和 $broadcast （Vue1中可以用來(lái)實(shí)現(xiàn)基于組件樹(shù)結(jié)構(gòu)的事件流通信，vue2中已經(jīng)被移除）

（父要傳到孫；孫要傳到父；）

dispatch 是一個(gè)事件，首先會(huì)在自己實(shí)例本身上觸發(fā)，然后沿父鏈向上傳播。
broadcast 是一個(gè)事件，它向下傳播到當(dāng)前實(shí)例的所有后代。由于后代擴(kuò)展為多個(gè)子樹(shù)，事件傳播將會(huì)遵循許多不同的“路徑”。 除非回調(diào)返回 true，否則在沿該路徑觸發(fā)偵聽(tīng)器回調(diào)時(shí)，每個(gè)路徑的傳播將會(huì)停止。

//grandoon.vue組件

//dispatch實(shí)現(xiàn)
/**
 * Recursively propagate an event up the parent chain.
 * 遞歸地在父鏈上傳播事件。
 * @param {String} event
 * @param {...*} additional arguments
 */
// $dispatch 方法是定義在 Vue 的 prototype 上的
// 接受一個(gè)字符串類型的事件名稱
Vue.prototype.$dispatch = function (event) {
 // 首先執(zhí)行 $emit 觸發(fā)事件，將返回值保存在 shouldPropagate 中
 var shouldPropagate = this.$emit.apply(this, arguments)
  
 // 如果首次執(zhí)行的 $emit 方法返回的值不是 true 就直接返回
 // 如果返回值不是 true 就說(shuō)明組件邏輯不希望事件繼續(xù)往父組件進(jìn)行傳遞
 if (!shouldPropagate) return
  
 // 如果首次執(zhí)行 $emit 方法返回值是 true 就獲取當(dāng)前組件的 parent 組件實(shí)例
 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)前組件實(shí)例
 return this
}

broadcast 實(shí)現(xiàn)
Vue.prototype.$broadcast = function (event) {
 // 獲取傳入事件的類型，判斷是否為字符串
 var isSource = typeof event === "string"
  
 // 校正 event 的值，當(dāng)接受 event 的類型為字符串時(shí)就直接使用，如果不是字符串就使用 event 上的 name 屬性 
 event = isSource ? event : event.name
  
 // if no child has registered for this event,
 // then there"s no need to broadcast.
 // 如果當(dāng)前組件的子組件沒(méi)有注冊(cè)該事件，就直接返回，并不用 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 }
 }

*

組件傳值，尤其是祖孫組件有跨度的傳值。

現(xiàn)在我們來(lái)討論一種情況，A組件與C組件怎么通信，我們有多少種解決方案？

我們使用VueX來(lái)進(jìn)行數(shù)據(jù)管理，但是如果項(xiàng)目中多個(gè)組件共享狀態(tài)比較少，項(xiàng)目比較小，并且全局狀態(tài)比較少,那使用VueX來(lái)實(shí)現(xiàn)該功能，并沒(méi)有發(fā)揮出VueX的威力。

使用B來(lái)做中轉(zhuǎn)站，當(dāng)A組件需要把信息傳給C組件時(shí)，B接受A組件的信息，然后利用屬性傳給C組件，這是一種解決方案，但是如果嵌套的組件過(guò)多，會(huì)導(dǎo)致代碼繁瑣，代碼維護(hù)比較困難;如果C中狀態(tài)的改變需要傳遞給A, 使用事件系統(tǒng)一級(jí)級(jí)往上傳遞 。

自定義一個(gè)Vue 中央數(shù)據(jù)總線，這個(gè)情況適合碰到組件跨級(jí)傳遞消息，但是使用VueX感覺(jué)又有點(diǎn)浪費(fèi)的項(xiàng)目中，但是缺點(diǎn)是，碰到多人合作時(shí)，代碼的維護(hù)性較低，代碼可讀性低

$attrs $listeners

在vue2.4中，為了解決該需求，引入了$attrs?和$listeners ，?新增了inheritAttrs?選項(xiàng)。

$attrs  (屬性集合)
$listeners (方法集合)
v-bind="$attrs", v-on="$listeners"

$attrs包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)

provide inject

1.provide就相當(dāng)于加強(qiáng)版父組件prop
2.inject就相當(dāng)于加強(qiáng)版子組件的props?

因?yàn)橐陨蟽烧呖梢栽诟附M件與子組件、孫子組件、曾孫子...組件數(shù)據(jù)交互，也就是說(shuō)不僅限于prop的父子組件數(shù)據(jù)交互，只要在上一層級(jí)的聲明的provide，那么下一層級(jí)無(wú)論多深都能夠通過(guò)inject來(lái)訪問(wèn)到provide的數(shù)據(jù)

//父組件

 

缺點(diǎn)：
這么做也是有明顯的缺點(diǎn)的，在任意層級(jí)都能訪問(wèn)導(dǎo)致數(shù)據(jù)追蹤比較困難，不知道是哪一個(gè)層級(jí)聲明了這個(gè)或者不知道哪一層級(jí)或若干個(gè)層級(jí)使用了，因此這個(gè)屬性通常并不建議使用能用vuex的使用vuex，不能用的多傳參幾層，但是在做組件庫(kù)開(kāi)發(fā)時(shí)，不對(duì)vuex進(jìn)行依賴，且不知道用戶使用環(huán)境的情況下可以很好的使用

event bus

實(shí)現(xiàn)途徑是在要相互通信的兄弟組件之中，都引入一個(gè)新的vue實(shí)例，然后通過(guò)分別調(diào)用這個(gè)實(shí)例的事件觸發(fā)和監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞。

有了eventbus后

發(fā)送組件中
`
EventBus.$emit("hello", this.number);`

接受組件中
`
EventBus.$on("hello", (number) = > {

console.log(number)

});`

使用case

注意

$bus.on應(yīng)該在created鉤子內(nèi)使用，如果在mounted使用，有可能接收不到其他組件來(lái)自created鉤子內(nèi)發(fā)出的事件。

使用了$bus.on，在beforeDestroy鉤子里應(yīng)該再使用$bus.off解除，因?yàn)榻M件銷毀后，沒(méi)有必要把監(jiān)聽(tīng)句柄存儲(chǔ)在vue-bus里了。