eventBus是用于组件间通讯的一种方法，vuex我们都是很熟悉的了
而eventBus 在组件间通讯还是很方便的，如我们现在有三个组件
父组件 fatherTest 子组件 childOne childTwo
在fatherTest 父组件里面引入childOne 、 childTwo 两个组件
下面实现childOne 和 childTwo 进行通讯传值
在创建eventsBus.js 在里面把这个实例抛出去
import Vue from 'vue'
export const eventBtn = new Vue()
子组件 childOne.vue
import { eventBtn } from './evensBtn.js'
handleCommunication(){
eventBtn.$emit('obj', {name:'测试参数'})
}
子组件 childTwo.vue
import { eventBtn } from './evensBtn.js'
created () {
eventBtn.$on('obj', (n) => {
console.log(n) // {name:'测试参数'}
})
}
这样就可以正确的组件通信，当然我们还要注意一个点他会触发多次，应该在子组件的生命周期 beforeDestroy 里面使用$off进行销毁
子组件 childOne、childOne.vue 里面加入 $off('obj')
beforeDestroy () {
eventBtn.$off('obj')
}
=============================================
就在一个小时前一个朋友刚好说到这个问题，让我用eventsBus 事情是这样的
父组件里面有2个子组件，代号one two 组件
默认展示one 组件，one组件里面一个按钮可以跳转到two组件并且携带参数过去，随后two页面在返回到one组件()，
ps (这里 one two 页面是通过一个状态判断展示的)
结果我被误导了,错以为他要我全程使用eventBus
先说下我愚蠢的写法吧
1.one 页面 跳 two 页面的时候 使用eventBus.emit('obj','two')进行传参
2.在父组件eventBus.on('obj',()=>{ // 获取参数，展示two页 })
3.two页面 先是在created里面打印one传来的参数结果 // 输出空值
two页面按钮，点击调用eventBus.emit('obj','one')
父组件监听状态切换到one页面
一番操作后发现问题不断，！梳理
- 一是因为 one 跳 two的时候 created 还没创建找不到，所以第一次two 组件没有取到one的值，在beforeDestroy里面进行emit()就可以了
- 在 two页面由于我又创建了一个eventBus.emit('obj','one') 跳转回去沉浸在one two 跳转的时候发现不对劲了为啥每次输出的值都会累加，点第一次出现 一条，点第三次直接出现3条...
这时候不要慌去百度搜一下，嗯没问题 beforeDestroy 里面加off('obj')就行赖，不要烦 加一下直接GG one 跳two可以，two跳转回来也没问题当我们在点击的时候 那按钮好像坏了似的，父组件也监听不到，就此卡住！
===========================================
冷静了一下，换个思路代码也写的简洁点吧
能不用eventBus.emit 就不用，
one 跳 two组件的时候直接用beforeDestroy里面用eventsBus.emit()给 two传值 在点击事件里面使用vue的emit() 给父组件传值并且调用，父组件判断 one two组件的显示
现在的传值顺序直接one 传two 不走父组件，这样看的没问题，但是还会有数据叠加的问题，这时候想起来可能我写法有问题，百度里面老哥的解决办法是可以的
beforeDestroy () {
eventBtn.$off('obj')
}
果不其然成功了，很流畅，记录一下吧哈哈当写日志了
