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

 更新时间:2019年06月10日 08:51:31   作者:慕斯不想说话  
这篇文章主要介绍了vue通信方法EventBus的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vue通信方式有很多,项目中用的比较多的的有 pros、vuex、$emit/$on 这3种,还有 provide/inject (适合高阶组件)、 $attrs$listeners (适合高阶组件)以及 $parent/$child/refeventBus 等这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的实现代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue3 element-plus实现图片预览功能实例

    vue3 element-plus实现图片预览功能实例

    这篇文章主要给大家介绍了关于vue3 element-plus实现图片预览功能的相关资料,在项目中我们经常会碰到图片预览的功能需求,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vuex 动态注册方法 registerModule的实现

    vuex 动态注册方法 registerModule的实现

    这篇文章主要介绍了vuex 动态注册方法 registerModule的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue使用element-ui实现菜单导航

    Vue使用element-ui实现菜单导航

    这篇文章主要为大家详细介绍了Vue使用element-ui实现菜单导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue实现验证码按钮倒计时功能

    vue实现验证码按钮倒计时功能

    最近项目结束,空闲时间比较多,今天小编抽时间给大家使用vue写一个小例子,就决定做验证码倒计时功能,具体实例代码大家参考下本文
    2018-04-04
  • vue3 :deep()的使用教程

    vue3 :deep()的使用教程

    对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • VUE中如何渲染Echarts动画柱状图

    VUE中如何渲染Echarts动画柱状图

    这篇文章主要介绍了VUE中如何渲染Echarts动画柱状图问题,具有很好的参考价值,希望对大家有所帮助。
    2023-03-03
  • vue使用@include或@mixin报错的问题及解决

    vue使用@include或@mixin报错的问题及解决

    这篇文章主要介绍了vue使用@include或@mixin报错的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue实现自动滑动轮播图片

    vue实现自动滑动轮播图片

    这篇文章主要为大家详细介绍了vue实现自动滑动轮播图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 深入了解Vue.js 混入(mixins)

    深入了解Vue.js 混入(mixins)

    这篇文章主要介绍了Vue.js 混入的相关资料,文中讲解非常细致,示例代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 在vue中如何引入外部less文件

    在vue中如何引入外部less文件

    这篇文章主要介绍了在vue中如何引入外部less文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论