vue 的Event Bus使用

vue項目中的event bus是解決組件間通信的一個方法,關於組件通信,就是組件A 和組件B 需要共用一個數據,對於父子組件來說就比較簡單,要是兄弟間,兄弟之外的組件要進行通信,官網給出的是vuex,對於使用vuex官網又提出以下建議

而這個簡單的store模式 就是使用event bus;

關於event bus就是創建一個新的vue實例,把數據需要公用的數據存儲在它上面,通過$emit()和$on()方法進行數據的讀寫

下面就通過vue-loader項目,應用event bus實現組件間的數據共享

新建bus.js

在頭部和身體引入bus.js;並根據需要進行數據的存儲,存數據:bus.$emit('名',‘值’); 取數據:bus.$on('名',function(val){})

頭部組件接收content組件傳來的值

content組件修改頭部組件的值

 

最終實現非父子之間的數據共享

初始頁面:

點擊按鈕後的頁面

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章