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

Vue是一個輕量級的漸進式框架，對于它的一些特性和優(yōu)點，請在官網(wǎng)上進行查看，不再贅述。

使用NPM及相關(guān)命令行工具初始化的Vue工程，目錄結(jié)構(gòu)如下

接著我們進入Demo，首先我們可以刪除掉模板項目中src/components/Hello.vue,然后在App.vue中刪除對于Hello子組件的注冊和使用還有一些其他無關(guān)緊要的東西，此時的App.vue應(yīng)為這樣

一、我們先來創(chuàng)建中央事件總線，在src/assets/下創(chuàng)建一個eventBus.js,

內(nèi)容如下（eventBus中我們只創(chuàng)建了一個新的Vue實例，以后它就承擔起了組件之間通信的橋梁了，也就是中央事件總線。）

二、 創(chuàng)建一個firstChild組件，引入eventBus這個事件總線，接著添加一個按鈕并綁定一個點擊事件

1、我們在響應(yīng)點擊事件的sendMsg函數(shù)中用$emit觸發(fā)了一個自定義的userDefinedEvent事件，并傳遞了一個字符串參數(shù)

2、$emit實例方法觸發(fā)當前實例(這里的當前實例就是bus)上的事件,附加參數(shù)都會傳給監(jiān)聽器回調(diào)。

三、 我們再創(chuàng)建一個secondChild組件，引入eventBus事件總線，并用一個p標簽來顯示傳遞過來的值

1、我們在mounted中，監(jiān)聽了userDefinedEvent,并把傳遞過來的字符串參數(shù)傳遞給了$on監(jiān)聽器的回調(diào)函數(shù)

2、mounted:是一個Vue生命周期中的鉤子函數(shù)，簡單點說就類似于jQuery的ready，Vue會在文檔加載完畢后調(diào)用mounted函數(shù)。

3、$on:監(jiān)聽當前實例上的自定義事件(此處當前實例為bus)。事件可以由$emit觸發(fā)，回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)($emit)的額外參數(shù)。

四、在父組件中，注冊這兩個組件，并添加這兩個組件的標簽

保存所有修改的文件，然后打開瀏覽器窗口，內(nèi)容如下(css請自行處理)

點擊向組件傳值按鈕，我們可以看到傳值成功

總結(jié)：

1、創(chuàng)建一個事件總線，例如demo中的eventBus，用它作為通信橋梁

2、在需要傳值的組件中用bus.$emit觸發(fā)一個自定義事件，并傳遞參數(shù)

3、在需要接收數(shù)據(jù)的組件中用bus.$on監(jiān)聽自定義事件，并在回調(diào)函數(shù)中處理傳遞過來的參數(shù)

另外：

1、兄弟組件之間與父子組件之間的數(shù)據(jù)交互，兩者相比較，兄弟組件之間的通信其實和子組件向父組件傳值有些類似，其實他們的通信原理都是相同的，例如子向父傳值也是$emit和$on的形式，只是沒有eventBus，但若我們仔細想想，此時父組件其實就充當了bus這個事件總線的角色。

2、這種用一個Vue實例來作為中央事件總線來管理組件通信的方法只適用于通信需求簡單一點的項目，對于更復(fù)雜的情況，Vue也有提供更復(fù)雜的狀態(tài)管理模式Vuex來進行處理。

以上這篇Vue2.0子同級組件之間數(shù)據(jù)交互方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論