vue 设置事件总线 EventBus

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

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

class EventBus {
        constructor(){
            (this as any).callbacks = {}
        }
    
        /**
         * 事件总线中注册事件 singleFlag为true 表示只能注册一次 防止重复执行
         * @param name
         * @param fn
         * @param singleFlag
         */
        $on(name:any, fn:any,singleFlag=false){
            if(singleFlag){
                (this as any).callbacks[name] = (this as any).callbacks[name] || [];
                (this as any).callbacks[name][0]=fn;
            }else{
                (this as any).callbacks[name] = (this as any).callbacks[name] || [];
                (this as any).callbacks[name].push(fn)
            }
        }
    
        /**
         * 事件触发
         * @param name
         * @param args
         */
        $emit(name:any, args:any){
            if((this as any).callbacks[name]){
                (this as any).callbacks[name].forEach((cb:any) => cb(args))
            }
        }
    }
    
    export default EventBus;

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

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

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

this.$bus && this.$bus.$on(this.sectionId + "_tabChange", ({sectionId, item}) => {
                        if (window.appObj.sysName === "groupAdmin") {
                            this.initTempDataItems();
                        } else {
                            this.initDataByUrl();
                        }
                    }, true);
       //点击弹出更多界面
                    this.$bus && this.$bus.$on(this.sectionId + "_moreLinkClick", ({sectionId, item, moreUrl}) => {
                        this.jumpToPage(moreUrl);
                    }, true);

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

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