兄弟组件之间的相互通信

方法一，新建一个js文件作为事件中心

//eventBus.js文件
import Vue from 'vue'

export default new Vue()

需要发布事件的组件上面使用eventBus.$emit()发布事件
组件A发布事件

//A组件
<template>
	<div id="app"></div>
</template>
<script>
import eventBus from './eventBus.js'

export default {
    data(){
    	name:''
    },
	 methods:{
	 },
	 mounted(){
	 		eventBus.$emit('update-name',this.name)
	 }
}
</script>
<style scoped></style>

组件B接受值

//B组件
<template>
	<div id="app"></div>
</template>
<script>
import eventBus from './eventBus.js'

export default {
    data(){
    	myname:''
    },
	 methods:{
	 },
	 mounted(){
	 		eventBus.$on('update-name',(nam)=>{
	 			this.myname = name
	 		})
	 },
	 //注意，在组件销毁时需要先进行关闭监听
	 beforeDestroy() {
   		 EventBus.$off("update-name", {});
  	},

}
</script>
<style scoped></style>

方法二 直接在项目中的 main.js 初始化 EventBus
好处 ，所有的vue组件或者实例都能使用这个东西
这样就不用每次去引用这个东西

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

Vue.prototype.$EventBus = new Vue()

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')