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函式中用emit例項方法觸發當前例項(這裡的當前例項就是bus)上的事件,附加引數都會傳給監聽器回撥。
三 . 我們再建立一個secondChild元件,引入eventBus事件匯流排,並用一個p標籤來顯示傳遞過來的值
四 . 在父元件中,註冊這兩個元件,並新增這兩個元件的標籤
儲存所有修改的檔案,然後開啟瀏覽器視窗,內容如下(css請自行處理) 點擊向元件傳值按鈕,我們可以看到傳值成功 總結: 1、建立一個事件匯流排,例如demo中的eventBus,用它作為通訊橋樑 2、在需要傳值的元件中用bus.on監聽自定義事件,並在回撥函式中處理傳遞過來的引數
另外: 1、兄弟元件之間與父子元件之間的資料互動,兩者相比較,兄弟元件之間的通訊其實和子元件向父元件傳值有些類似,其實他們的通訊原理都是相同的,例如子向父傳值也是on的形式,只是沒有eventBus,但若我們仔細想想,此時父元件其實就充當了bus這個事件匯流排的角色。 2、這種用一個Vue例項來作為中央事件匯流排來管理元件通訊的方法只適用於通訊需求簡單一點的專案,對於更復雜的情況,Vue也有提供更復雜的狀態管理模式Vuex來進行處理。