在vue中用于组件之间的通讯有多种方法,其中包括vuex,和中央事件总线bus;而vuex与bus又有一些区别。
vuex比较强大,bus比较简单。vuex可用于更为复杂的组件通讯中,还可以进行逻辑处理。
而bus则是数据传输
创建一个vue-bus插件:
创建vue-bus.js
const install= function(Vue){
const Bus = new Vue({
methods: {
emit (event , ...args) {
this.$emit(event, ...args)
},
on(event,callback){
this.$on(event, callback)
},
off(event,callback){
this.$off(event,callback)
}
});
Vue.prototype.$bus = Bus;
});
export default install;
在main.js中配置:
import VueBus from './vue.bus'
Vue.use(VueBus);
在组件中使用:
调用:
methods :{
fn(){
this.$bus.emit('add;,data);
}
监听:
created(){
this.$bus.on('add',callback)//尽量在created中监听,否则可能监听不到,来自其他created内触发的事件。
},
beforeDestroy(){
this.$bus.off('add',callback);//当组件被销毁时,解除该监听事件。
}