vue2组件通信之event bus的使用与实现

bus的使用

在main.js

Vue.prototype.$bus=new Vue()

在组件a中监听数据

this.$bus.$on('b',msg=>{

console.log(msg)

})

在组件b中传递数据

this.$bus.$emit('b','我是传递的数据')

bus的实现

class Bus{

constructor()={

this.callbacks={};

}

$on(name,fn){

this.callbacks[name] =this.callbacks[name] || [];

this.callbacks[name].push(fn);

}

$emit(name,args){

if(this.callbacks[name]){

this.callbacks[name].forEach(back=>back(args));

}

}

}

在man.js中通过引入

Vue.prototype.$bus=new Bus()