好看的網(wǎng)頁千篇一律，有趣的代碼萬里挑一囚企。

“阿彌陀佛，善哉善哉瑞眼×辏”

“魔鏡啊伤疙！魔鏡银酗，誰是這世界上最美麗的女人？”

“愿上帝保佑你徒像，阿門黍特！”

等等，這些語句是不是特別經(jīng)典锯蛀？特別有畫面感灭衷？眼前立馬浮現(xiàn)出家人、后母和牧師旁涤？

通過言語翔曲，可以判斷一個(gè)人的職業(yè)迫像、身份、地位瞳遍。

通過特殊語句可以與神明通話闻妓，可以和精靈共舞。

那么Vue各個(gè)組件之間如何通信掠械？

轉(zhuǎn)載的一篇作者名為“愛學(xué)習(xí)的小仙女早睡早起” 的一篇文章：《vue 組件通信方式》

Vue 組件間通信只要指以下 3 類通信：

父子組件通信由缆、隔代組件通信、兄弟組件通信猾蒂，下面分別介紹每種通信方式且會(huì)說明此種方法可適用于哪類組件間通信均唉。

（1）props / $emit 適用 父子組件通信

父組件注入，子組件接收婚夫。

這種方法是 Vue 組件的基礎(chǔ)浸卦，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展開介紹案糙。

注意：props是單向數(shù)據(jù)流限嫌，既只能從父級(jí)傳到子級(jí)，如果想要達(dá)到雙向时捌，子級(jí)能夠修改父級(jí)怒医，則需要給props加sync修飾符。(文章后部分有詳細(xì)介紹)

（2）ref與$parent / $children適用 父子組件通信

ref：如果在普通的 DOM 元素上使用奢讨，引用指向的就是 DOM 元素稚叹；如果用在子組件上，引用就指向組件實(shí)例

$parent / $children：訪問父 / 子實(shí)例

（3）$attrs / $listeners適用于 隔代組件通信

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

當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)扒袖，這里會(huì)包含所有父作用域的綁定 ( class 和 style 除外 )，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件亩码。通常配合 inheritAttrs 選項(xiàng)一起使用季率。

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

（4）provide / inject適用于 隔代組件通信

祖先組件中通過 provider 來提供變量描沟，然后在子孫組件中通過 inject 來注入變量飒泻。provide / inject API 主要解決了跨級(jí)組件間的通信問題，不過它的使用場景吏廉，主要是子組件獲取上級(jí)組件的狀態(tài)泞遗，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。

（5）EventBus （$emit / $on）適用于 父子席覆、隔代史辙、兄弟組件通信

這種方法通過一個(gè)空的 Vue 實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實(shí)現(xiàn)任何組件間的通信髓霞，包括父子卦睹、隔代、兄弟組件方库。

（6）Vuex適用于 父子结序、隔代、兄弟組件通信

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式纵潦。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）徐鹤。“store” 基本上就是一個(gè)容器邀层，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )返敬。

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候寥院，若 store 中的狀態(tài)發(fā)生變化劲赠，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation秸谢。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化凛澎。

vuex的詳細(xì)使用方法：vuex管理狀態(tài)倉庫使用詳解

Vue 組件間通信是面試常考的知識(shí)點(diǎn)之一估蹄，這題有點(diǎn)類似于開放題塑煎，你知道的回答出越多方法越加分，表明你對(duì) Vue 掌握的越熟練臭蚁。

舉例props使用

a.vue 引用了一個(gè)detail組件

詳解eventBus通信方法

第一步：首先需要?jiǎng)?chuàng)建事件總線并將其導(dǎo)出最铁，以便其它模塊可以使用或者監(jiān)聽它。

兩個(gè)初始化事件中心的方法：

第二步：創(chuàng)建了 EventBus 垮兑，接下來你需要做到的就是在你的組件中加載它冷尉，并且調(diào)用同一個(gè)方法，就如你在父子組件中互相傳遞消息一樣系枪。

假設(shè)你有兩個(gè)Vue頁面需要通信： A 和 B 网严，A頁面 在按鈕上面綁定了點(diǎn)擊事件，發(fā)送一則消息嗤无，想通知 B頁面。

接下來怜庸，我們需要在 B頁面 中接收這則消息当犯。

同理我們也可以在 B頁面 向 A頁面 發(fā)送消息。這里主要用到的兩個(gè)方法：

如果使用不善割疾，EventBus會(huì)是一種災(zāi)難嚎卫，到底是什么樣的“災(zāi)難”了？大家都知道vue是單頁應(yīng)用，如果你在某一個(gè)頁面刷新了之后拓诸，與之相關(guān)的EventBus會(huì)被移除侵佃，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁面奠支，EventBus在監(jiān)聽的時(shí)候就會(huì)觸發(fā)很多次馋辈，也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系倍谜。通常會(huì)用到迈螟，在vue頁面銷毀時(shí)，同時(shí)移除EventBus事件監(jiān)聽尔崔。

如果想移除事件的監(jiān)聽答毫，可以像下面這樣操作：

$on事件是不會(huì)自動(dòng)清楚銷毀的，需要我們手動(dòng)來銷毀季春，否則在b組件每次加載一次就會(huì)創(chuàng)建一個(gè)監(jiān)聽洗搂，會(huì)重復(fù)監(jiān)聽到數(shù)據(jù)。

可以使用EventBus.$off('aMsg')來移除應(yīng)用內(nèi)所有對(duì)此某個(gè)事件的監(jiān)聽载弄。

或者直接調(diào)用EventBus.$off()來移除所有事件頻道耘拇，不需要添加任何參數(shù) 。

總結(jié)： 所以侦锯，如果想要用bus 來進(jìn)行頁面組件之間的數(shù)據(jù)傳遞驼鞭，需要注意兩點(diǎn)，組件A$emit事件應(yīng)在beforeDestory生命周期內(nèi)尺碰。其次挣棕，組件B內(nèi)的$on記得要銷毀。