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

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供通化企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為通化眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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)聽器回調(diào)。

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

1、我們?cè)趍ounted中，監(jiān)聽了userDefinedEvent,并把傳遞過(guò)來(lái)的字符串參數(shù)傳遞給了$on監(jiān)聽器的回調(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)聽當(dāng)前實(shí)例上的自定義事件(此處當(dāng)前實(shí)例為bus)。事件可以由$emit觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)($emit)的額外參數(shù)。

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

保存所有修改的文件，然后打開瀏覽器窗口，內(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)聽自定義事件，并在回調(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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)標(biāo)題：Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
文章位置：http://m.kartarina.com/article4/jeddie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、定制網(wǎng)站、定制開發(fā)、響應(yīng)式網(wǎng)站、企業(yè)建站、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)