zoukankan      html  css  js  c++  java
  • vue2 Bus兄弟组件间传值问题:重复触发和首次未触发

    场景:组件A list页面, 组件B info页面;点击组件A,引起组件B数据刷新。

    问题一:重复触发

    1.本页面点击,只会触发一次。代码如下:

    Bus.$emit('DataObj', JSON.stringify(this.dataObj));
    

    2.当涉及到页面切换时,每切换一次页面,就会多打印一次,重复几次,会发现会多次触发。代码如下:

    Bus.$on("DataObj", (val)=> {
          let Data = JSON.parse(val);
          this.DepartId = Data.deptId;
          this.timeVal = Data.date;
          this.loadChartData();
        })
    

    对应上面情况。1是正常的,2就是坑了

    为什么会出现这种情况呢?
    使用$emit会建立的一个新的消息机制,而组件销毁时这个消息机制一直未被销毁。不停的切换页面,会不断的挂载和销毁组件.
    如果每切换一次页面,就会创建一个新的消息机制,不断的创建而不销毁,导致B组件接受事件里的操作重复触发.

    解决办法:在每次页面销毁前,去销毁这个消息机制。代码如下:

    beforeDestroy() {
        Bus.$off();
      }
    

    问题二:首次未触发

    主要还是页面未创建的时候,按钮已经发出了消息,页面当然接收不到了。

    解决办法:在this.(nextTick页面元素加载完后,再执行)emit方法。代码如下:

    this.$nextTick(function () {
            Bus.$emit('DataObj', JSON.stringify(this.dataObj));
          })
    

    哎呀,真香!

  • 相关阅读:
    checkIP.sh
    checkAPP
    &&和&区别,||和|区别?
    手动测试oracle数据库连接
    存储过程的优缺点?
    什么是存储过程?用什么来调用?
    序列的作用
    内连接和外连接
    左连接和右连接
    java中常用的类、包、借接口
  • 原文地址:https://www.cnblogs.com/midnight-visitor/p/14964032.html
Copyright © 2011-2022 走看看