• 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));
          })
    

    哎呀,真香!

  • 相关阅读:
    12.9Java日报
    2020-12-10日报博客-周四
    2020-12-9日报博客-周三
    2020-12-8日报博客-周二
    2020-12-7日报博客-周一
    2020-12-6日报博客-一周总结
    2020-12-4日报博客-周五
    .NET ------ 界面显示优化(新增,查询窗口)
    构建之法阅读笔记——程序员篇
    Eclipse的Junit单元测试
  • 原文地址:https://www.cnblogs.com/midnight-visitor/p/14964032.html
Copyright © 2020-2023  润新知