Vue中的EventBus你们在使用时有遇到过这种情况吗？？？

本文首发在个人的博客上，地址：重庆崽儿Brand，欢迎访问~~~~

最近做公司项目遇到这样一个需求：

• 从一个页面跳转到另一个页面去选择一些信息，选择好后返回上一个页面，并把选择的信息带过来

由于之前一直在工作中用的mui这个前端框架，框架自己封装有实现这个需求的方法，所以实现就很简单，但是现在公司项目用的是Vue，首先想到的方法可能就是用localstorage或者Vuex来实现了，由于项目比较小，几乎不会用到Vuex，如果只是这里用到的话，感觉Vuex不是特别合适，于是就pass掉了。localstorage又感觉逼格不够高，于是也pass掉了，在群里和网上一番咨询，于是准备使用Vue官方也有推荐的一个非父子组件通信的方法：eventBus

First、先准备这样两个页面：

1. HomePage:

2. SecondPage:

页面效果如图：

Second、开始使用EventBus

根据官方文档（ 官方文档地址 ），先在main.js文件中声明一个全局的空的Vue实例：

window.Bus = new Vue();

然后修改HomePage和SecondPage两个页面的代码，

最开始我的写法如下：

HomePage部分代码

// HomePage

SecondPage部分代码

来看看控制台的效果：

从控制台可以看到，当我们从SecondPage返回到HomePage的时候控制台已经打印出我们从SecondPage传过来的值了。但是！！！！，不要高兴的太早。。。。。，看看页面上！！！并不是显示的我们传过来的值。。。而是初始值，这是什么情况！！！？？？？

最后，通过群里大佬给的资料（资料再此！！！！），终于实现了想要的效果

资料中说：因为vue-router在切换时，先加载新的组件，等新的组件渲染好但是还没挂在前，销毁旧的组件，然后再挂载组件

在路由切换时，执行的方法依次是：

新組件： beforeCreate
新組件： created
新組件： beforeMount
旧組件： beforeDestroy
旧組件： destroy
新組件： mounted

所以，新组件只要在旧组件beforeDestroy之前，$on事件就能成功接收到。

现将两个页面的部分代码做如下修改：

HomePage部分代码

// HomePage

SecondPage部分代码

不知道你们了解这个EventBus的使用姿势了吗？反正作为Vue菜鸟的我是又学到了，

欢迎留言说说你们在vue开发中遇到的一些值得卸载小本本上的问题呗~~~