快捷導(dǎo)航

Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法

更新時(shí)間：2018年02月28日 14:17:37 作者：wjq_smile

下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

Vue是一個(gè)輕量級(jí)的漸進(jìn)式框架，對(duì)于它的一些特性和優(yōu)點(diǎn)，請(qǐng)?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中刪除對(duì)于Hello子組件的注冊(cè)和使用還有一些其他無(wú)關(guān)緊要的東西，此時(shí)的App.vue應(yīng)為這樣

一、我們先來(lái)創(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、我們?cè)陧憫?yīng)點(diǎn)擊事件的sendMsg函數(shù)中用$emit觸發(fā)了一個(gè)自定義的userDefinedEvent事件，并傳遞了一個(gè)字符串參數(shù)

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

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

1、我們?cè)趍ounted中，監(jiān)聽(tīng)了userDefinedEvent,并把傳遞過(guò)來(lái)的字符串參數(shù)傳遞給了$on監(jiān)聽(tīng)器的回調(diào)函數(shù)

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

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

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

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

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

總結(jié)：

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

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

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

另外：

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

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

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

您可能感興趣的文章: