vue中bus的使用及踩坑解决

import Vue from "Vue"
export default new Vue

import bus from '@/assets/js/eventBus.js';
bus.$emit("info", "123") // 使用
bus.$on("info", (val) => { // 接收
  console.log("info val", val);
})

import Bus from '@/assets/js/eventBus.js';  
Vue.prototype.$bus = Bus;  //注意这里的Vue是我上面引入的vue   import Vue from 'vue'
this.$bus.$emit("vaPage",value); //很像父子之间传值的方法
this.$bus.$on("vaPage", v =>{   //vaPage传的时候的key是什么接收就必须是什么
   console.log(v);   //v是传来的值，可以接收多个参数
})

  beforDestroy（）{
     this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁
      bus.$off("info") // 或者
  }

  data() {
    return {
      lovk: true, // 定义一个变量
    }
  },
  // 在销毁前解绑bus
  beforeDestroy() {
    this.lovk = false
    console.log("beforeDestroy", this.lovk)
  },
  mounted() { 
    bus.$on("info", (val) => {
      if (this.lovk) { // 如果this.lovk为true，说明该页面存在需要执行里面的方法，否则就不执行
        console.log("info val", val);
      }
    })  
  },
// 那么有人会说为什么不直接将整个bus.$on()包裹进去呢？如下列：
  mounted() { 
 if (this.lovk) { // 这样写都不会触发了不是更好吗？
    bus.$on("info", (val) => { 
        console.log("info val", val);
    })  
  }
 },
// 其实是不可行的，实验一下你会发现，当你页面消失在显示后bus.$on()方法不执行了