网络编程
位置：首页>> 网络编程>> JavaScript>> vue通信方式EventBus的实现代码详解

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

作者：慕斯不想说话　　发布时间：2024-05-10 14:16:38　

标签：vue,通信,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的实现代码详解,网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：https://juejin.im/post/5cfcf29ef265da1ba647df38

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com