交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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的实现代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

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

    广而告之:
    热门推荐:
    MySQL-Python安装问题小记

    安装完mysql-python后import加载模块提示以下错误, 复制代码 代码如下: ImportError: libmysqlclient_r.so.16: cannot open shared object file: No such file or directory 于是google之,总结一下解决方法: (1)在mysql-ython的安装目录下找到site.cfg,将 #mysql_confi···

    如何给网站部分链接设置绝对地址?

    绝对地址指的是包含域名的完整网址。有些网站程序或空间不方便设置301,为了实现首选域,可以给网站部分链接主导航或重要链接采用设置绝对地址的方式,同样也可以起到确定首选域的作用。

    js仿支付宝填写支付密码效果实现多方框输入密码

    不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码。 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响···

    Mysql查询正在执行的事务以及等待锁的操作方式

    使用navicat测试学习: 首先使用set autocommit = 0;(取消自动提交,则当执行语句commit或者rollback执行提交事务或者回滚) 在打开一个执行update 查询 正在执行的事务: SELECT * FROM information_schema.INNODB_TRX 根据这个事务的线程ID(trx_mysql_thread_id): 从上···

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己。 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的。 ···

    深入理解JavaScript系列(17):面向对象编程之概论详细介绍

    介绍 在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题)。我们将更多地从理论方面看这些问题。 特别是,我们会考虑对象的创建算法,对象(包括基本关系 - 继承)之间的关系是如何,也可以在讨论中使用(我希望将消除之前···

    JavaScript 绘图代码

    JavaScript绘图 JavaScript绘图 如果需要在网页上提供图形化的资料,通常是将其制作成图片,但这样一来网络上的开销就太大了。有什么办法呢?这里向你提供一组JavaScript函数,来解决这一问题。虽然简单了点,但是对画点线图来说还是绰绰有余的! [Ctrl+A 全···

    网页设计中文本输入框的一些参数说明

    在一般的留言本,论坛等地方都要用到文本输入框,也就是html语言中的textarea,textare包含有众多的参数,学会运用这些参数,就可以随意修改文本输入框的大小和外观,达到你想要的效果,下面就来介绍这些参数,以及如何使用这些参数。 1、cols,垂直列。在没有做样式表设置的情···

    百度网盘直链下载助手怎么用?百度网盘直链下载助手安装使用图文教程

    百度网盘直链下载助手是一款支持获取百度网盘文件真实下载地址(直链)的强大油猴脚本,可配合IDM、迅雷等工具使用,下载百度网盘文件速度可达几兆!百度网盘直链下载助手怎么用?可参考百度网盘直链下载助手安装及使用详细教程。 百度网盘直链下载助手安装使用教程 1. 安装教···

    PHP nl2br函数 将换行字符转成 <br>

    将换行字符转成 <br> 。 语法 : string nl2br(string string); 返回值 : 字符串 函数种类 : 资料处理 内容说明 本函数将换行字符转换成 HTML 换行的 <br> 指令。 复制代码 代码如下: <?php $str=' 第一行 第二行 第三行 '; echo $str;// 没有替换的 echo(···