Vue中EventBus通信方式实现代码详解如何改写为一个长尾？

本文共计511个文字，预计阅读时间需要3分钟。

Vue通信方式丰富多样，项目中常用的包括props、Vuex、$emit/$on，还有provide/inject（适用于高级组件）、$attrs和$listeners（适用于高级组件）以及$parent/$child/ref、eventBus等几种方式。

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的实现代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自由互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！