46、兄弟组件通信

使用EventBus（事件总线），它允许两个组件之间直接通讯

1、兄弟组件使用事件总线通信的步骤：

1）创建事件总线，管理组件之间的通信（空的Vue实例，就是事件总线）。bus.js

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

2) 在需要使用 事件总线 的组件中引入上面创建的 bus.js 文件。

import Bus from 'common/js/bus.js';   // 这个文件路径写自己的

3）发送事件（消息）的组件。$emit分发事件

Bus.$emit('getTarget', event.target);   

4）接收事件（消息）的组件。$on 监听事件

Bus.$on('getTarget', target => {  
    console.log(target);  
}); 

5）销毁监听

bus.$off(eventName);

2、案例

两个组件dome01 和 demo02 ，dome01 发送消息给 demo02，dome02 收到 dome01 发送的消息后展示到自己的界面上！使用 eventBus 实现。

1）首先创建 bus.js 文件（创建事件总线）

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

2）编写 dome01 组件。通过$emit 发送myMsg主题的消息。

<template>
    <div>
        <h2>这是demo01组件</h2>
        <button @click="add"> 点击向dome02组件发送消息 </button>
    </div>
</template>

<script>

import Bus from '../utils/bus'

export default {
    methods:{
        // 点击按钮发送Bus消息
        add(){
            // 发送 myMsg 主题 的Bus消息
            Bus.$emit('myMsg', "你好啊，我叫王佳伟");
            // 打印一下日志
            console.log("dome01组件发送完消息：bus事件触发了")
        }
    }
}
</script>

3）编写 dome02 组件。通过$on接收myMsg主题的消息。

<template>
  <div>
    <h2>这是dome02组件</h2>
    <h3>这个地方展示dome01组件的命令</h3>
    <!-- 把 dome01 发过来的消息渲染到下面 -->
    <span>{{msg}}</span>
  </div>
</template>

<script>

// 引入bus.js文件
import Bus from '../utils/bus'

export default {
  data() {
    return {
      msg: "wjw"
    };
  },
  // 在mounted钩子里面就开始定阅myMsg主题的消息
  mounted() {
      Bus.$on('myMsg', myMsg => {  
            console.log("dome02组件收到bus消息：",myMsg);  
            this.msg = myMsg
        });  
  }
};
</script>

在上述代码中，这就相当于将发送的值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。

虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。