Vue组件传值—eventBus

前言

在vue中，组件之间传值是非常重要的，这关系到整个项目是否能正常运行，是否合乎逻辑，而在vue中，组件之间的传值方法有很多种,例如：prop、vuex、evenBus等。
因为我个人目前只理解了用evenBus进行传值，所以我就说一下我对于evenBus传值的理解。

一、eventBus简介

eventBus（事件总线），实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。
可以简单理解为将需要传递的数据从当前组件抛出去，在需要接收的组件中接收即可。
有点相当于将需要传递的数据变为公共数据，这样所有的组件都可以获取被传递出去的数据。

二、eventBus使用

1、第一步：首先新建一个.js文件，名称随便取(本文档中取名为bus.js)。
在bus.js文件中引入vue，再创建一个vue实例。

//在.js文件中加入以下代码即可
import Vue from 'Vue'   //引入vue
export default new Vue  //创建一个实例

第二步：在需要通信的组件中分别引入这个创建好的.js文件。

import Bus from '……'
//省略号处是bus.js文件的路径
//其中Bus是随便取的一个名称，可以更改。
//只要记得在之后的引入中都要使用这个名称

3、第三步：发送/接收数据
发送数据

Bus.$emit('click',data)   
//这个click是一个自定义的事件名称，data就是你要传递的数据
//在后面，要使用这个值时，都要注明事件的名称，即这里的'click';

接收数据

Bus.$on('click',(target) => {

})

需要注意：单引号内表示接收的事件名称，而target则是随便取的一个名称，它的作用类似于创建了一个target对象，而target中的属性就是事件‘click’发送出去的值。在省略号处就可以对接收到的数据进行处理。需要注意的是接收数据的代码需要写在created() {……}。

为什么Bus.$on要写在created中？
答： 放在created中最主要的原因是组件的生命周期执行顺序决定的，a是现在的组件，b是即将显示的组件，那么执行顺序是b先created（创建完成），beforeMount（挂载前）,然后才是a的beforeDestroy（实例销毁前）
,destroyed（销毁监听事件前）钩子执行,a的mounted最后执行,针对这种业务你想一下，你在b的beforeDestroy钩子中触发emit，如果在a的mounted中监听，这时候a的生命周期还没有执行到那一步所以，你的触发是不会生效的，所以更通用的情况是放在created钩子中。

三、清除事件eventBus

需要注意的是：事件不会自动动清除，它是一直会存在的，这样的话，有个问题就是反复进入到接受数据的组件内操作获取数据，原本只执行一次的获取的操作将会有多次操作。而在vue中，一般在beforeDestroy或者destroyed中用vue实例的$off方法清除eventBus。

四、例子

结尾

有什么我理解错了的地方，请指正，谢谢。