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

1 EventBus.$emit('refreshPro');

B组件部分代码：

　　　　　　　　　　　　　　　　　　　　　　　　　 B组件HTML

 1 <el-container>

 2         <el-aside width="100%">项目

 3           <table>

 4             <tr>

 5               <td v-for="itemPro in ProjectArr" style="padding-right:10px">

 6                 <div :id= "itemPro.projectId" class="tableTypeItem" style="padding: 10px;width:180px;text-align: left;background-color: #eeeeee" @click="objClickHandler(itemPro.name,itemPro.projectId)">

 7                   <div style="height:10px;border-bottom: 2px  #000000">

 8                     <a>{{itemPro.name}}</a>

 9                   </div>

10                   <hr class="line"/>

11                   <div style="padding:10px 0">

12                     <a>{{itemPro.time}}</a>

13                     <br>

14                     <br>

15                     <a>{{itemPro.user}}</a>

16                   </div>

17                 </div>

18               </td>

19             </tr>

20           </table>

21         </el-aside>

22         <!--<el-main>全部项目-->

23         <!--</el-main>-->

24       </el-container>

B组件js

 1 mounted(){

 2       var _self = this;

 3       EventBus.$on('refreshPro', function () {

 4         _self.changeColor();

 5         _self.GetRecord();

 6         _self.$refs.pie.GetPerInstance();

 7         _self.$refs.bar.GetInstance();

 8       })

 9     },

10 destroyed: function() {

11       EventBus.$off('refreshPro');

12     }

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

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

A组件代码

1 computed: {

2       SelectPro() {

3         return this.$store.getters.ProjectName

4       }

5     }

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

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

代码： eventbus.js

1 import Vue from 'vue'

2

3 //消息总线

4 export default new Vue();

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

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

巴特西

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

最新文章

热门文章