震惊，原来组件通信还能用这种方式

组件之间的通信

什么是组件通信？相信在座各位小伙伴们都知道，并且常用，我们最常用的组件通信无非就是子传父、父传子、层级多的情况下还用穿透、store状态管理，然而还有一种不常见但是非常好用的方法————> 他就是eventBus。

实现途径

在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

例子

这里我们拿Vue来做个简单的例子，页面 A.vue、B.vue。

A.vue 选择下拉的方法handleCommand

    <el-dropdown trigger='click' @command='handleCommand'>
    

我们想要在A.vue里面抛出选择的下拉框的默认值，让兄弟组件看到，我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js

import Vue from 'vue'
export default new Vue()

这样我们就创建了一个新的vue实例，接下来在A.vue组件引入它。

import Bus from './bus'

接下来我们再A组件的handleCommand方法中触发一个事件

 handleCommand(command) {
    Bus.$emit('handleFunc', { command })
  }

在这里我们每次选择 都会触发handleFunc，并将事件传递的参数顺着事件传递出去。

接下来在B组件的created()生命周期里

import Bus from './bus' // 同样需要引入 实例中间件

created() {
    Bus.$on('handleFunc', command => {
        console.log(command) // 就可以拿到我们传递出来的值
    })
}

用完之后别忘记关闭监听哦

 beforeDestroy() {
    Bus.$close('handleFunc')
 },

接下来我们看个实际的例子

我们需要从树的嵌入功能里抛出选择过当前节点的值并且传递给爷爷组件，下面我们来看实现

选择方法

eventBus通信

爷爷组件拿到选中的值，和当前节点选中节点信息

页面死亡的时候 关闭eventBus监听