vue2中$emit $on $off实现组件之间的联动，绝对有你想了解的

在vue2开发中，你肯定会遇到组件之间联动的问题，现在我们就来说说哪个神奇的指令可以满足我们的需求。

一、先上实例：

需求：点击A组件或者B组件可以使C组件的名称相应发生改变，同样，点击A组件也会使对应的B或者C组件显示选中状态。

二、说一说$emit、 $on 、$off

1、vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

2、vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调，如果没有参数，形式为vm.$emit(event)

3、vm.$off( [event, callback] )

移除自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器。

三、图示代码实现

点击A组件，B或C组件相应改变（请注意代码中的EventBus对象，文末会进行解释，听哀家一句劝，少踩十年坑）

A组件部分代码：

                                                                    A组件HTML

<el-submenu index="3">
          <template slot="title">{{SelectPro}}</template>
          <el-menu-item :index="item.number" v-for="(item,index) in ProjectList" :key="index"
                  @click="proClickHandler(item.name,item.ProjectId)">{{item.name}}
          </el-menu-item>
</el-submenu>                        

                                               A组件js

EventBus.$emit('refreshPro');

B组件部分代码：

　　　　　　　　　　　　　　　　　　　　　　　　　 B组件HTML

                                                                                                   

<el-container>
        <el-aside width="100%">项目
          <table>
            <tr>
              <td v-for="itemPro in ProjectArr" style="padding-right:10px">
                <div :id= "itemPro.projectId" class="tableTypeItem" style="padding: 10px;180px;text-align: left;background-color: #eeeeee" @click="objClickHandler(itemPro.name,itemPro.projectId)">
                  <div style="height:10px;border-bottom: 2px  #000000">
                    <a>{{itemPro.name}}</a>
                  </div>
                  <hr class="line"/>
                  <div style="padding:10px 0">
                    <a>{{itemPro.time}}</a>
                    <br>
                    <br>
                    <a>{{itemPro.user}}</a>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </el-aside>
        <!--<el-main>全部项目-->
        <!--</el-main>-->
      </el-container>

                                     B组件js

mounted(){
      var _self = this;
      EventBus.$on('refreshPro', function () {
        _self.changeColor();
        _self.GetRecord();
        _self.$refs.pie.GetPerInstance();
        _self.$refs.bar.GetInstance();
      })
    },
10 destroyed: function() {
      EventBus.$off('refreshPro');
    }

点击B或者C组件，A组件相应改变：

实现原理为将A组件的数据放到vuex中进行状态管理，当vuex中的数据改变时，computed的钩子函数触发自定义的SelectPro（）方法改变A组件的显示名称。

                                 A组件代码

computed: {
      SelectPro() {
        return this.$store.getters.ProjectName
      }
    }

四、切勿忘记的公共实例，大坑，勿踩！

网上百度千篇一律全是使用$emit来实现，但是有一个大坑没有给别人说明，开始我都按照搜索的结果进行操作，都会出现子组件$emit后父组件没有监听到函数的变化，研究了好久才发现$emit和$on的事件必须使用一个空的 Vue 实例作为中央事件总线的实例上，才能够触发。即上述代码中的EventBus。

代码：                                                                               eventbus.js

import Vue from 'vue'

//消息总线
export default new Vue();

                                                                             A、B组件中引入eventbus.js文件

import EventBus from '../../EventBus.js'