首先在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例：

export const eventBus = new Vue()

接着在新创建的BrotherCard、SisterCard组件导入main.js：

<script>

    import { eventBus } from '../main'

</script>

<!-- SisterCard.vue -->
<template>
    <div class="message">
        <div class="message-header">
            <h5 v-text="theCardTitle"></h5>
        </div>
        <div class="message-body">
            <p class="message-text">我是Sister组件</p>
            <button @click="messageBrother" class="btn">给哥哥发消息</button>
 
            <div v-if="fromBrother" class="alert" v-html="fromBrother"></div>
        </div>
    </div>
</template>
 
<script>
    import { eventBus } from "../main";
 
    export default {
        name: "SisterCard",
        data: () => ({
            theCardTitle: "Sister Card",
            fromBrother: ""
        }),
        methods: {
            messageBrother() {
                eventBus.$emit("sisterSaid", "妈妈说，该做作业了！(^_^)!!!");
            }
        },
        created() {
            eventBus.$on("brotherSaid", message => {
                this.fromBrother = message;
            });
        }
    };
</script>
 
<!-- BrotherCard.vue -->
<template>
    <div class="message">
        <div class="message-header">
            <h5 v-text="theCardTitle"></h5>
        </div>
        <div class="message-body">
            <p class="message-text">我是Brother组件</p>
            <button @click="messageSister" class="btn">给妹妹发消息</button>
 
            <div v-if="fromSister" class="alert" v-html="fromSister"></div>
        </div>
    </div>
</template>
 
<script>
    import { eventBus } from "../main.js";
 
    export default {
        name: "BrotherCard",
        data: () => ({
            theCardTitle: "Brother Card",
            fromSister: ""
        }),
        methods: {
            messageSister() {
                eventBus.$emit("brotherSaid", "妈妈说，该做作业了！(^_^)!!!");
            }
        },
        created() {
            eventBus.$on("sisterSaid", message => {
                this.fromSister = message;
            });
        }
    };
</script>

event.js

import Vue from 'vue';

export default new Vue();

import event form 'event.js'

 event .$emit('active','chuangzi')//自定义事件
 event .$on('active','触发方法')//监听自定义事件
 event .$off('active')// 移除自定义事件监听器
 //如果没有提供参数，则移除所有的事件监听器；

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

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

创建需要通信的中间bus.js文件

import Vue from 'vue'
export default new Vue

创建兄弟组件1

<template>
	<div @click="sendMsg"> </div>
</template>
...省略
import bus from '@/utils/bus.js"

methods:{
	sendMsg(){
		bus.$emit("receiveMsg","hello！I'm from SendMsg")
	},
}

创建兄弟组件2

<template>
	<div></div>
</template>
...省略
import bus from '@/utils/bus.js"
# 钩子函数mounted
mounted:{
	bus.$on("receiveMsg",msg=>{
		console.log(msg)
	})
}