Vue中的eventBus初尝试

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

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

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

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

  1. HomePage:
    ```
2. SecondPage:
页面效果如图:

![HomePage](http://static.brandhuang.com/image/HomePage.png)
![SecondPage](http://static.brandhuang.com/image/SecondPage.png)

### Second、开始使用EventBus
> 根据官方文档( [官方文档地址](https://cn.vuejs.org/v2/guide/migration.html#dispatch-%E5%92%8C-broadcast-%E6%9B%BF%E6%8D%A2) ),先在main.js文件中声明一个全局的空的Vue实例:

window.Bus = new Vue();

然后修改HomePage和SecondPage两个页面的代码,
### 最开始我的写法如下:

##### HomePage部分代码

// HomePage

##### SecondPage部分代码
#### 来看看控制台的效果:
![image](http://static.brandhuang.com/image/look-console.png)

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

**最后,通过群里大佬给的资料([资料再此!!!!](https://segmentfault.com/q/1010000007879907)),终于实现了想要的效果**

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

在路由切换时,执行的方法依次是:

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


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

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

##### HomePage部分代码

// HomePage

##### SecondPage部分代码

#### 不知道你们了解这个EventBus的使用姿势了吗?反正作为Vue菜鸟的我是又学到了,
欢迎留言说说你们在vue开发中遇到的一些值得卸载小本本上的问题呗~~~

文章归类于: 码不停蹄

文章标签: #Vue#前端

版权声明: 自由转载-署名-非商用

0条评论

提示:

评论会在审核通过后显示在下方

昵称必填,用于展示在评论中

邮箱必填,不会公开展示,方便及时收到回复

网址选填,方便看到的人去访问,请完整填写,例如(http://www.brandhuang.com)

快来抢个沙发吧