vue通信方式EventBus的实现代码详解

前端  /  管理员 发布于 5年前   793

vue通信方式有很多，项目中用的比较多的的有 pros、vuex、$emit/$on 这3种，还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。很多时候我们都是只会使用api，而懂得原理以及实现，但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的。所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下。这也是自己学到大佬的的东西后并在此记录（转载）一下。

class EventBus{    constructor(){      this.event=Object.create(null);    };    //注册事件    on(name,fn){      if(!this.event[name]){        //一个事件可能有多个监听者        this.event[name]=[];      };      this.event[name].push(fn);    };    //触发事件    emit(name,...args){      //给回调函数传参      this.event[name]&&this.event[name].forEach(fn => {        fn(...args)      });    };    //只被触发一次的事件    once(name,fn){      //在这里同时完成了对该事件的注册、对该事件的触发，并在最后并取消该事件。      const cb=(...args)=>{        //触发        fn.apply(this,args);        //取消        this.off(name,fn);      };      //监听      this.on(name,cb);    };    //取消事件    off(name,offcb){      if(this.event[name]){        let index=this.event[name].findIndex((fn)=>{          return offcb===fn;        })        this.event[name].splice(index,1);        if(!this.event[name].length){          delete this.event[name];        }      }    }  }

以上代码用的是发布订阅模式。

总结

以上所述是小编给大家介绍的vue通信方式EventBus的实现代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue采用EventBus实现跨组件通信及注意事项小结
• vue2.0s中eventBus实现兄弟组件通信的示例代码
• vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
• vue2.0组件之间传值、通信的多种方式(干货)
• Vue组件通信的四种方式汇总
• 详解vue组件通信的三种方式
• vue中eventbus被多次触发以及踩过的坑
• 详解vue 组件之间使用eventbus传值