vue 设置事件总线 EventBus

忘是亡心i 2022-12-29 07:00 213阅读 0赞

有些场景下使用 EventBus 总线要让代码简单许多。
第一步：编写EventBus类

  1. class EventBus {
  2.     constructor(){
  3.         (this as any).callbacks = {}
  4.     }
  6.     /**
  7.      * 事件总线中注册事件 singleFlag为true 表示只能注册一次 防止重复执行
  8.      * @param name
  9.      * @param fn
  10.      * @param singleFlag
  11.      */
  12.     $on(name:any, fn:any,singleFlag=false){
  13.         if(singleFlag){
  14.             (this as any).callbacks[name] = (this as any).callbacks[name] || [];
  15.             (this as any).callbacks[name][0]=fn;
  16.         }else{
  17.             (this as any).callbacks[name] = (this as any).callbacks[name] || [];
  18.             (this as any).callbacks[name].push(fn)
  19.         }
  20.     }
  22.     /**
  23.      * 事件触发
  24.      * @param name
  25.      * @param args
  26.      */
  27.     $emit(name:any, args:any){
  28.         if((this as any).callbacks[name]){
  29.             (this as any).callbacks[name].forEach((cb:any) => cb(args))
  30.         }
  31.     }
  32. }
  34. export default EventBus;

第二步：将事件总线放入到vue中，找到main.js文件加入如下代码

  1. Vue.prototype.$bus = new EventBus();

第三步：则就是注册事件了

  1. this.$bus && this.$bus.$on(this.sectionId + "_tabChange", ({sectionId, item}) => {
  2.                     if (window.appObj.sysName === "groupAdmin") {
  3.                         this.initTempDataItems();
  4.                     } else {
  5.                         this.initDataByUrl();
  6.                     }
  7.                 }, true);
  8.    //点击弹出更多界面
  9.                 this.$bus && this.$bus.$on(this.sectionId + "_moreLinkClick", ({sectionId, item, moreUrl}) => {
  10.                     this.jumpToPage(moreUrl);
  11.                 }, true);

第四步：则就是触发事件了：

  1. this.$bus&&this.$bus.$emit(this.sectionId+"_tabChange",{sectionId:this.sectionId,item});

发表评论

表情：
评论列表 （有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

    相关 javafx事件总线之EventBus

    > JAVAFX EventBus是一个轻量级的事件总线框架，用于在JavaFX应用程序中实现基于事件的通信和解耦。它提供了一种简单的方式，让组件能够订阅和发布事件，从而使得应

    痛定思痛。痛定思痛。/ 0 赞/ 121 阅读