Vue2.0父子組件之間和兄弟組件之間的數據交互

熟悉了Vue.js的同級組件之間通訊，寫此文章，以便記錄。

Vue是一個輕量級的漸進式框架，對於它的一些特性和優勢，請在官網上進行查看，再也不贅述。

使用NPM及相關命令行工具初始化的Vue工程，目錄結構以下

 

接着咱們進入Demo，首先咱們能夠刪除掉模板項目中src/components/Hello.vue,而後在App.vue中刪除對於Hello子組件的註冊和使用還有一些其餘可有可無的東西，此時的App.vue應爲這樣

 

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

另外：

一、兄弟組件之間與父子組件之間的數據交互，二者相比較，兄弟組件之間的通訊其實和子組件向父組件傳值有些相似，其實他們的通訊原理都是相同的，例如子向父傳值也是$emit和$on的形式，只是沒有eventBus，但若咱們仔細想一想，此時父組件其實就充當了bus這個事件總線的角色。二、這種用一個Vue實例來做爲中央事件總線來管理組件通訊的方法只適用於通訊需求簡單一點的項目，對於更復雜的狀況，Vue也有提供更復雜的狀態管理模式Vuex來進行處理。