事件总线bus传参

 Bus作为一个中转站，实现非父子之间组件之间的通信.

  bus本质上是vue对象，传递的方法本质上就是emit与on

创建文件

 页面引入

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
        //    }
      });
    },

事实上bus传参是真不好用，实现方式都是跟vuex似的创建全局变量或方法，但bus传参emit时经常因为执行顺序问题导致on接收不到，兄弟组件之间的渲染顺序本就大差不差，当需要emit传递的数据稍微多一点，on就接收不到了，这个时候只能延时emit发送