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组件修改头部组件的值

 

最终实现非父子之间的数据共享

初始页面:

点击按钮后的页面

 

 

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