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()

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容