vue 的Event Bus使用

vue项目中的event bus是解决组件间通信的一个方法,关于组件通信,就是组件A 和组件B 需要共用一个数据,对于父子组件来说就比较简单,要是兄弟间,兄弟之外的组件要进行通信,官网给出的是vuex,对于使用vuex官网又提出以下建议

vue 的Event Bus使用

而这个简单的store模式 就是使用event bus;

关于event bus就是创建一个新的vue实例,把数据需要公用的数据存储在它上面,通过$emit()和$on()方法进行数据的读写

下面就通过vue-loader项目,应用event bus实现组件间的数据共享

新建bus.js

vue 的Event Bus使用

在头部和身体引入bus.js;并根据需要进行数据的存储,存数据:bus.$emit('名',‘值’); 取数据:bus.$on('名',function(val){})

头部组件接收content组件传来的值

vue 的Event Bus使用

content组件修改头部组件的值

 vue 的Event Bus使用

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

初始页面:

vue 的Event Bus使用

点击按钮后的页面

vue 的Event Bus使用