Vue2.0組件之間通訊

Vue中組件這個特性讓很多前端er很是喜歡，我本身也是其中之一，它讓前端的組件式開發更加合理和簡單。筆者以前有寫過一篇Vue2.0子父組件通訊，此次咱們就來聊一聊平級組件之間的通訊。

---

首先咱們先搭好開發環境，咱們先得裝好git和npm這兩個工具(若是有不清楚的同窗請自行百度哦)

環境搭建步驟：

• 打開git ，運行 npm install --global vue-cli 這是安裝vue的命令行
• vue init webpack vue-demo 這是vue基於webpack的模板項目
• cd vue-demo 進入vue-demo文件夾
• npm install 安裝package.json中依賴的node_modules
• npm run dev 運行該項目

在Vue2.0子父組件通訊這篇文章聊到過不管是父向子傳值仍是子向父傳值，都須要一箇中間介質。對於平級組件來講其實也同樣，他們也須要一箇中間介質來做爲一個中央事件總線,咱們瞭解到這個以後就開始來寫個Demo吧。

咱們在git上運行 npm run dev 的命令後，瀏覽器中會打開一個vue基於webpack構建工具的一個模板項目，接着咱們在編輯器中進入Demo，咱們能夠刪除掉模板項目中src/components/Hello.vue,而後在App.vue中刪除對於Hello子組件的註冊和使用還有一些其餘可有可無的東西，此時的App.vue應爲這樣

 

App.png

一 .咱們先來建立中央事件總線，在src/assets/下建立一個eventBus.js,內容以下

 

eventBus.png

eventBus中咱們只建立了一個新的Vue實例，之後它就承擔起了組件之間通訊的橋樑了，也就是中央事件總線。

二 . 建立一個firstChild組件，引入eventBus這個事件總線，接着添加一個按鈕並綁定一個點擊事件

 

firstChild.png

咱們在響應點擊事件的sendMsg函數中用$emit觸發了一個自定義的userDefinedEvent事件，並傳遞了一個字符串參數
PS:$emit實例方法觸發當前實例(這裏的當前實例就是bus)上的事件,附加參數都會傳給監聽器回調。

三 . 咱們再建立一個secondChild組件，引入eventBus事件總線，並用一個p標籤來顯示傳遞過來的值

 

secondChild.png

咱們在mounted中，監聽了userDefinedEvent,並把傳遞過來的字符串參數傳遞給了$on監聽器的回調函數
PS:
mounted:是一個Vue生命週期中的鉤子函數，簡單點說就相似於jquery的ready，Vue會在文檔加載完畢後調用mounted函數。
$on:監聽當前實例上的自定義事件(此處當前實例爲bus)。事件能夠由$emit觸發，回調函數會接收全部傳入事件觸發函數($emit)的額外參數。

四 . 在父組件中，註冊這兩個組件，並添加這兩個組件的標籤

 

App2.png

保存全部修改的文件，而後打開瀏覽器窗口，內容以下(css請自行處理)

 

browser.png

點擊向組件傳值按鈕，咱們能夠看到傳值成功

 

browser2.png

---

總結：

• 建立一個事件總線，例如demo中的eventBus，用它做爲通訊橋樑
• 在須要傳值的組件中用bus.$emit觸發一個自定義事件，並傳遞參數
• 在須要接收數據的組件中用bus.$on監聽自定義事件，並在回調函數中處理傳遞過來的參數

** 題外話：**
1.看過筆者上一篇Vue2.0子父組件通訊這篇文章的同窗能夠感受到，組件以前的通訊其實和子組件向父組件傳值有些相似，其實他們的通訊原理都是相同的，例如子向父傳值也是$emit和$on的形式，只是沒有eventBus，但若咱們仔細想一想，此時父組件其實就充當了bus這個事件總線的角色。
2.這種用一個Vue實例來做爲中央事件總線來管理組件通訊的方法只適用於通訊需求簡單一點的項目，對於更復雜的狀況，Vue也有提供更復雜的狀態管理模式Vuex來進行處理

做者：PengL連接：http://www.jianshu.com/p/d946bd7c26f4來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。