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

Vue是一個(gè)輕量級的漸進(jìn)式框架，對于它的一些特性和優(yōu)點(diǎn)，請?jiān)诠倬W(wǎng)上進(jìn)行查看，不再贅述。

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

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

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

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

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

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

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

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

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

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

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

四、在父組件中，注冊這兩個(gè)組件，并添加這兩個(gè)組件的標(biāo)簽

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

點(diǎn)擊向組件傳值按鈕，我們可以看到傳值成功

總結(jié)：

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

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

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

另外：

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

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

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

最新評論