eventBus是组件消息传递的一种方式,基于一个消息中心,订阅和发布消息的模式,称为发布订阅者模式。
1为消息中心,2为订阅消息,3为发布消息。show code
1.Event.js 封装代码
class Event{
constructor(){
this.callbacks = {}
}
//解除监听 用的比较少
$off(name){
this.callbacks[name] = null
}
//提交通信封装
$emit(name, args){
let cbs = this.callbacks[name]
if (cbs) {
cbs.forEach(c=>{
c.call(this, args)
})
}
}
//监听封装
$on(name, fn){
(this.callbacks[name] || (this.callbacks[name] = [])).push(fn)
}
}
export default new Event()
随便放在项目哪里都可以。用的时候直接import
2.需要监听通信的组件
import Bus from "../../utils/Event";
export default {
created() {
Bus.$on("set_message", (obj) => {
console.log("收到的信息名字:"+obj.name+"收到的信息值:"+obj.value)
});
},
};
3.发起通讯的组件
import Bus from "../../utils/Event";
export default {
created() {
Bus.$emit("set_message", {
name: "我的名字",
value: "值",
});
},
};