Vue组件通信中事件总线（eventBus）的使用

　　之前公司的项目中使用 eventBus 进行组件通信时遇到了一些数据渲染时的问题，下面对遇到的这些问题做下简单的介绍以及解决方法。

　　我们都知道，在 Vue 中，组件通信的方式有很多，而针对那些没有父子级关系或者任何关系的组件要实现通信（数据传递）的方法就是使用 Vuex 或者 eventBus（事件总线），具体应该选择哪一种还要看实际情况。公司的项目中两种方法都有使用，而自己当时对 Vuex 的使用还不是很熟悉，所以就选择了 eventBus 来实现组件通信。然而在开发过程中还是遇到了一些问题。

　　首先来看下项目中要实现的效果：

　　大致需求是这样：左边地图组件和右边视图组件需要关联，点击左边时需要发送 机器告警（图）的数据 和 机器缺陷（图）的数据 给视图组件，而，右边视图组件中有一个公共的组件用来展示数据，用户通过点击 “机器告警” 或者 “机器缺陷” 按钮来获得对应的图示。

 

　　robotState.vue 中的 html 代码（部分）：

<template>
  <div>
    <section class="the-wrapper">
      <h2 class="title">
        <span @click="switchView" :class="xxxx"></span>
        <span class="switch-btn" :class="{ active: currentTab === 1 }" @click="switchTab(1)">机器告警</span>
        <span class="switch-btn" :class="{ active: currentTab === 2 }" @click="switchTab(2)">机器缺陷</span>
      </h2>
    </section>
    <!-- 机器告警图（表） -->
    <section v-if="currentTab === 1" :key="0" style="xxxx">
      <transition enter-active-class="animated slideInLeft">
        <v-canvas-pie v-if="isPieView" ref="pie" />
        <v-table v-else ref="table" />
      </transition>
    </section>
     <!-- 机器缺陷图（表） -->
    <section v-if="currentTab === 2" :key="1" style="xxxx">
      <transition enter-active-class="animated slideInLeft">
        <v-canvas-pie v-if="isPieView" ref="pie" />
        <v-table v-else ref="table" />
      </transition>
    </section>
  </div>
</template>

　　map.js 中的逻辑（部分）：

getData = async (city) => {
    // 机器告警（图）
    axios.post('xxxxxxxxxxxxx',{id:city.code})
        .then(res=>{
           res.data.map(item=>{
               Bus.$emit('AlarmInfoPie',[
                { name:"正常",value:item.normal },
                { name:"一般",value:item.commonly },
                { name:"严重",value:item.serious },
                { name:"危急",value:item.critical },
               ])
           }) 
        })

    // 机器缺陷（图）
    axios.post('mmmmmmmmmmmmmmm',{id:city.code})
    .then(res=>{
        res.data.map(item=>{
            Bus.$emit('defectPie',[
             { name:"无缺陷",value:item.normal },
             { name:"一般缺陷",value:item.commonly },
             { name:"严重缺陷",value:item.serious },
             { name:"危急缺陷",value:item.critical },
            ])
        }) 
    })
}

　　robotState.vue 中的逻辑（部分）：

export default {
    components:{
        VCanvasPie,
        VTable
    },
    data(){
        return {
            isPieView:true,
            currentTab:1,
        }
    },
    methods: {
        // 机器告警（图）
        async getRobotAlarmPie(){ 
            let temp,       // 定义需要渲染的数据
            const result = await axios.get('xxxxxxxxxxxxxxxx')
            result.data.map(item=>{
                // 数据处理（省略）
                this.$refs.pie.init(temp)
            })
            // 渲染从 map.js 传过来的数据
            Bus.$on('AlarmInfoPie',(data)=>{
                temp = data
            })
            this.$refs.pie.init(temp)
        },
         // 机器缺陷（图）
        async getRobotDefectPie(){
            let temp,   // 定义需要渲染的数据
            const result = await axios.get('xxxxxxxxxxxxxxxx')
            result.data.map(item=>{
                // 数据处理（省略）
                this.$refs.pie.init(temp)
            })
            // 渲染从 map.js 传过来的数据
            Bus.$on('defectPie',(data)=>{
                temp = data
            })
            this.$refs.pie.init(temp)
        }
    },
};

　　一开始数据处理逻辑就是这样，结果却是：点击地图组件的某个区域时，会进行正常渲染 “机器告警” 的数据，如果点击 “机器缺陷” 时，再点击地图组件的当前区域时却得不到对应的数据，而是渲染的是 “机器告警” 的数据，当时很懵逼，最后才知道由于 右边视图组件共用了一个数据展示的组件，当点击地图某个区域时，map.js 中的 eventBus 会有两个事件发射，robotState.vue 中对应也就有两个事件监听，从而获取数据，无论是点击 “机器缺陷” 还是 “机器告警”，后面监听的事件得到的数据都会被覆盖。找到了问题原因就很好解决，最先想到的是使用 vuex 来解决，但是需要推翻以前的代码重写，因为项目中有很多数据展示，就很麻烦；然后想的是能不能使用 eventBus 中的方法来解决，最后找到了 eventBus.$off() 方法来解决。

　　大致解决方法就是这样，可能解释的不是太清楚，自己可以写个案例实现下应该可以帮助理解。最后对 eventBus 的使用做一个小的补充，就是我们在项目中可能会创建多个 eventBus.js 文件，而两个或者多个组件要使用 eventBus 进行通信时一定要使用同一个 eventBus.js 文件，否则会报错，我之前就遇到过，哈哈！

　　总结：Vue中使用 eventBus 实现组件间的通信时，需要对 Bus.$emit()、Bus.$on()、Bus.$off() 或者其他 API 搭配使用。结合当前环境，判断是否有干扰项从而决定是否对 eventBus 进行移除。