vue中使用兄弟组件通信

1.在项目中新建一个eventBus.js

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

2.brother_A.vue（传出的组件）

import引入bus

import bus from './eventBus'

自定义一个emit事件

bus.$emit(‘share’,this.msg);

<template>
    <div>
        <button @click="sendMessage">发送消息</button>
    </div>
</template>
<script>
import bus from './eventBus'
export default {
   data() {
      return {
          message:'123',
      }
   },
methods:{
    sendMessage(){
        bus.$emit('share',this.message);
    }
}
}
</script>
<style>
</style>

3.brother_B.vue（接收的组件）

import引入bus

import bus from './eventBus'

接收这个emit事件

<template>
    <div>
      {{msgData}}
    </div>
</template>
<script>
import bus from './eventBus'
export default {
   data() {
      return {
          msgData:''
      }
   },
created(){
    bus.$on('share',val=>{
        this.msgData= val
    })
},