关于vue全局事件总线使用的数据响应问题

你能看到这儿，说明你对全局事件的基本使用还是知道的，那么具体使用就不多说了。我来说说，你或许遇到的最大的疑惑吧，当然了也是本人项目中遇到的问题。

问题描述

我在首页有个跳转方法：

 toMessage() {
      this.$router.push("/message");
      this.$bus.$emit('getms','hhhahaha')
    },

然后跳转后的页面mounted里面：

this.$bus.$on('getms',(res)=>{
          console.log('我是message接受的信息', res)
        })

我想着页面的跳转携带者大量的数据的话，通过路由携带参数显得有点麻烦，代码不美观。通过vueX的话，也觉得不太好，毕竟对于这么小需求，没必要关联到vuex里面。于是我就想通过全局事件总线。

如果你百度的话，80的教学都是关于使用简单的使用挂载到原型上面的方法，而他们使用的情景都是能够很完美的触发接收数据。当你实际去操作的时候，又会是另一番“灾难”。

你仔细观察，我说的这种情况是通过路由跳转的两个页面，属于不同页面的两个兄弟元素了。问题来了，

第一次进入要接受的页面的时候，压根就没有接收到数据。而当你回到首页再次进入的时候才会出现数据。

解决方法

emit的时候，使用定时器延迟触发，因为$emit触发时候，$on必须要已经存在。

this.$router.push("/message");
setTimeout(() => {
this.$bus.$emit('getms','hhhahaha')
}, 1000);

路由跳转之前，在beforeDestroy中触发，路由跳转之后新页面created接收，这

beforeDestroy() {
    this.$bus.$emit('getms','hhhahaha')
  },

created() {
    this.$bus.$on('getms',(res)=>{
        console.log('我是message接受的信息', res)
      })
  },

2. 数据多次接受可以在beforeDestory生命周期内销毁事件总线

beforeDestroy(){
    this.$bus.$off('getms');
  },

当然了，你也可以在destroyed，beforeRouteLeave中进行销毁操作。