事件总线bus传参问题

创建文件

3ce9b9e330b240279893341a60c936a6.png

 页面引入

92eae11923544741b7924aa621b9e41d.png

watch监听tab切换后进行bus.$emit传参,在另一个侧边栏组件是使用了Bus.$on获取数据的,但没成功刷新视图

  watch: {
    
    $route: {
      handler: function(route) {
        if (route.path.includes("/StatisticThing")) {
          this.isActive = "2";
        } else if (route.path.includes("/officePlatform/")) {
          Bus.$emit("ulLi2", this.officePlatformList);

          this.isActive = "1";
        } else if (route.path.includes("/examineGrade")) {
          this.isActive = "4";
        } else if (route.path.includes("/officeRiskInvestigation")) {
            Bus.$emit("ulLi2", this.riskInvestigationList);

          this.isActive = "7";
        }
      },
      immediate: true
    }
  },

上方代码的问题在哪呢,我们需要延迟传参事件,使用setTimeout就可以解决

  watch: {
    
    $route: {
      handler: function(route) {
        if (route.path.includes("/StatisticThing")) {
          this.isActive = "2";
        } else if (route.path.includes("/officePlatform/")) {
 setTimeout(() => {

          Bus.$emit("ulLi2", this.officePlatformList);
          }, 100);

          this.isActive = "1";
        } else if (route.path.includes("/examineGrade")) {
          this.isActive = "4";
        } else if (route.path.includes("/officeRiskInvestigation")) {
          setTimeout(() => {

            Bus.$emit("ulLi2", this.riskInvestigationList);
          }, 100);

          this.isActive = "7";
        }
      },
      immediate: true
    }
  },

一波未平一波又起,突然发现tab切换后选中状态丢了,接参数的时候来一个延迟就又行了,控制台打印发现不这样整mounted里的事件比created都要先执行

created() {
   this.getList();
  },
  mounted() {
    setTimeout(() => {
      this.checked();
    }, 100);

  },
  methods: {
    getList() {
      console.log("已执行 :>> ", "已执行");
      Bus.$on("ulLi2", ulLi2 => {
        this.ulLi = ulLi2;
        console.log("this.ulLi,ulLi2 :>> ", this.ulLi, ulLi2);
      });
    },
    checked() {
      var path = window.location.href;
      var i = path.indexOf("#"),
        i2 = path.indexOf("?"),
        pathTest = "";
      if (i > -1 && i2 > -1) {
        pathTest = path.slice(i + 1, i2);
      } else if (i > -1 && i2 == -1) {
        pathTest = path.slice(i + 1, path.length);
      }
      var checked = this.steamroller(this.ulLi);
      console.log("checked :>> ", checked);
      checked.forEach(ele => {
        if (ele.url) {
          var path = ele.url.split("?")[0];
          if (path == pathTest) {
            this.isActive = ele.id;
          }
        }

        //     if(ele.url == pathTest){
        //         this.isActive= ele.id
        //    }
      });
    },

猜你喜欢

转载自blog.csdn.net/aZHANGJIANZHENa/article/details/130082556