vue2.x中eventBus的使用及坑点

基本使用

eventBus适用于兄弟组件之间传值。因为是小型项目，不需要使用上vuex，于是考虑使用eventBus进行兄弟组件之间传值。

步骤：

1. 创建bus.js文件，可以放在工具类目录下，实质是创建一个Vue实例充当eventBus。

   import Vue from 'vue'
   export const bus = new Vue()
   

2. 在发送数据的组件调用$emit方法去发送数据。

   import {bus} from "../../utils/bus.js"
   // 这里自己修改路径，且bus.js文件中导出的是export所以使用import {bus}
   
   ...
   
   // 发送数据
   bus.$emit(参数1：'定义一个方法名', 参数2：'要发送的数据')
   

3. 接收数据的组件中调用$on方法监听

   import {bus} from "../../../utils/bus.js"
   
   ...
   
   // 接收数据
   bus.$on(参数1：'$emit的方法名', 参数2：'function(value){
       // value是接收到的数据
   }')
   

4. 最后还可以移除下eventBus

   eventBus.$off('方法名', {})
   

场景、坑点及原因

因为接收数据界面使用的懒加载，所有当发送数据页面调用接口获取到数据后，才会去使用$emit发送数据，然后跳转到接收数据界面。

所以$emit先于$on执行了，导致$on没有正确监听到。

解决方法：

1. 不要使用懒加载

2. 发送数据的时候存储在vue实例中，跳转到接收数据界面再取出来

   具体实现如下：

   bus.js文件

    ```
    import Vue from 'vue'
    export const Bus = new Vue({
      data () {
        return {
          // 定义数据
          data: {}
        }
      },
      created () {
        // 绑定监听
        this.$on('getInfo', value => {
          this.data = value
        })
      }
    })
    ```
    
   

   发送数据组件

   import {bus} from "../../utils/bus.js"
   
   ...
   
   // 发送数据
   bus.$emit(参数1：'定义一个方法名', 参数2：'要发送的数据')
   

   接收数据组件

   import {bus} from "../../utils/bus.js"
   computed: {
       records () {
         return bus.data
       }
     },
   

参考链接：

blog.csdn.net/qq_36490598…