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组件修改头部组件的值
最终实现非父子之间的数据共享
初始页面:
点击按钮后的页面