vue eventBus实现原理,你知道什么是类就懂

ApiPost-宣博文 前端 2021-03-25

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: "值",
    });
  },
};

Apipost 私有化火热进行中

评论