# 全局事件总线:可以实现任意组件间的通信
可以设置为全局事件总线的对象需要满足：
1、能使全局所有的组件都能够访问的到
2、这个对象具有$emit() $on() $off() 方法
满足这个两个要求的只有是Vue对象
全局事件组件可以实现任意两个组件之间进行数据的交互
创建全局实例对象：方式1
在main.js中
import Vue from "vue"
Vue.prototype.$EventBus=new Vue()
创建全局实例对象：方式2
在main.js中
new Vue({
render:h=>h(App),
绑定方式2：
beforeCreate(){
Vue.prototype.$EventBus=this
}
})
使用全局事件总线
组件2---》传递数据给--》组件1
组件1：绑定事件总线
mounted(){
this.$EventBus.$on("自定义事件名称",(【参数数】)=>{
<!-- 回调函数 -->
})
},
beforeDestroy(){
this.$EventBus.$off(“自定义事件名称”)解绑
}
组件2：触发自定义事件
methods:{
xxxClick(){
this.$EventBus.$emit("自定义事件名称",【参数数据】)
}
}
创建全局事件总线
main.js
// 创建全局事件总线 方式1：重新new一个Vue
// Vue.prototype.$EventBus = new Vue()
new Vue({
render: h => h(App), //h是一个函数createElement,将App这个组件替换首页面中的#app所控制的区域
beforeCreate() {
// 创建全局事件总线 方式1：使用当前的Vue作为全局事件总线
Vue.prototype.$EventBus = this
}
}).$mount('#app')
接收数据的组件（绑定事件的组件）
<template>
<div>
<h2>兄弟组件的名称:{{ name }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
};
},
mounted() {
this.$EventBus.$on("getName", (name) => {
console.log(name);
this.name=name
});
},
};
</script>
<style>
</style>
发送数据的组件（触发事件的组件）
<template>
<div>
<h2>兄弟组件的名称:{{ name }}</h2>
<button @click="sendName">点击获取兄弟组件的name</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "page2",
};
},
methods: {
sendName() {
this.$EventBus.$emit("getName", this.name);
},
},
};
</script>
<style>
</style>
