1. 程式人生 > >Vue2.0子同級元件之間資料互動

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這個事件匯流排,接著新增一個按鈕並繫結一個點選事件 在這裡插入圖片描述 1、我們在響應點選事件的sendMsg函式中用emituserDefinedEvent2emit觸發了一個自定義的userDefinedEvent事件,並傳遞了一個字串引數 2、emit例項方法觸發當前例項(這裡的當前例項就是bus)上的事件,附加引數都會傳給監聽器回撥。

三 . 我們再建立一個secondChild元件,引入eventBus事件匯流排,並用一個p標籤來顯示傳遞過來的值 在這裡插入圖片描述

1、我們在mounted中,監聽了userDefinedEvent,並把傳遞過來的字串引數傳遞給了on調2mounted:VuejQueryreadyVue調mounted3on監聽器的回撥函式 2、mounted:是一個Vue生命週期中的鉤子函式,簡單點說就類似於jQuery的ready,Vue會在文件載入完畢後呼叫mounted函式。 3、on:監聽當前例項上的自定義事件(此處當前例項為bus)。事件可以由emit調(emit觸發,回撥函式會接收所有傳入事件觸發函式(emit)的額外引數。

四 . 在父元件中,註冊這兩個元件,並新增這兩個元件的標籤 在這裡插入圖片描述

儲存所有修改的檔案,然後開啟瀏覽器視窗,內容如下(css請自行處理) 在這裡插入圖片描述 點擊向元件傳值按鈕,我們可以看到傳值成功 在這裡插入圖片描述 總結: 1、建立一個事件匯流排,例如demo中的eventBus,用它作為通訊橋樑 2、在需要傳值的元件中用bus.emit3bus.emit觸發一個自定義事件,並傳遞引數 3、在需要接收資料的元件中用bus.on監聽自定義事件,並在回撥函式中處理傳遞過來的引數

另外: 1、兄弟元件之間與父子元件之間的資料互動,兩者相比較,兄弟元件之間的通訊其實和子元件向父元件傳值有些類似,其實他們的通訊原理都是相同的,例如子向父傳值也是emitemit和on的形式,只是沒有eventBus,但若我們仔細想想,此時父元件其實就充當了bus這個事件匯流排的角色。 2、這種用一個Vue例項來作為中央事件匯流排來管理元件通訊的方法只適用於通訊需求簡單一點的專案,對於更復雜的情況,Vue也有提供更復雜的狀態管理模式Vuex來進行處理。