全局事件总线，安装，执行以及$on接收不到数据怎么解决

全局事件总线：适合任意组件间的数据传递

第一步：

安装全局事件总线:在main.js中写入如下代码即为安装全局事件总线

// 安装全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }

 第二步：

触发事件

传递数据的一方需要触发事件：在传输数据的vue中写入如下代码，

如果接收的数据不进行路由的跳转，直接参照下边代码定义在methods里边

 methods:{
  // 触发事件
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},

我做的项目进行了路由的跳转，所以定义在beforeDestroy里边了

$emit为触发事件，shopbag为自定义事件名，sid为传递参数

beforeDestroy() {
    // 触发事件
    // 全局事件总线
      this.$bus.$emit("shopbag", sid);
  }

 

文章最后会说明为什么要定义在 beforeDestroy里边

第三步：

接收事件

获取数据的一方需要接收事件，shopbag为自定义事件名，shopbagData为接收参数

mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('收到了数据', 接收参数);
  })
}

mounted() {
    // 全局事件总线
    // 接收事件
    this.$bus.$on("shopbag", (shopbagData) => {
      console.log(shopbagData);
    });
}

 

代码说明：

第二步触发事件为什么要定义在beforeDestroy里边，先聊一下生命周期执行顺序

通过全局事件总线传递数据同级路由发生跳转时

生命周期执行顺序：

旧组件(mounted) —>新组建(beforecreate—>beforemount) —>旧组件销毁—>新组件(mounted)

由此可知，如果把接收数据的内容放在mounted中，旧组件已经销毁，新组件才开始接收数据，会导致新组件接收不到旧组件传输过来的数据，所以要放在beforeDestroy中，此时新组件还没有销毁，旧组件已经接收到了数据，$on才可以监听到数据。

如果这样写还是解决不了问题，可以参照以下方法

第一步同上

第二步改为：

beforeDestroy() {
    // 触发事件
    // 全局事件总线
    this.$nextTick(function () {
      this.$bus.$emit("shopbag", sid);
    });
  },

 可以发现，在$emit外边加了一个this.$nextTick()方法

this.$nextTick这个方法作用是，当数据被修改后使用这个方法，会回调获取更新后的dome再渲染出来

如果这样还是监听不到数据，继续更改第三步

第三步：

mounted() {
    // 全局事件总线
    // 接收事件
    this.$bus.$on("shopbag", (shopbagData) => {
      window.sessionStorage.setItem("shopbagdata", JSON.stringify(shopbagData));
    });
    this.shopbagdata.push(
      JSON.parse(window.sessionStorage.getItem("shopbagdata"))
    );
}

 把接收的数据放在会话存储里，然后获取会话存储的数据，这样就可以接收到数据了

可能还会遇到第一次监听不到，第二次才可以监听到，可以参考vue官网生命周期执行顺序，让$on发生在$emit之前即可