vue全局事件总线

# 全局事件总线:可以实现任意组件间的通信
  可以设置为全局事件总线的对象需要满足：
    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>