Vue 全局事件总线

前言

全局事件总线使用于所有组件间的通信，通常在父子组件场景下，不建议使用全局事件总线，针对父子组件建议使用自定义组件事件，当同级别组件通信时建议使用全局事件总线。

Demo

需求： 让组件B中的人物信息通过全局事件总线传递给组件A

• 在应用入口文件main.js中注册全局事件总线

new Vue({
  render: h => h(App),
  //注册全局事件总线，$bus就是当前应用的vm
  beforeCreate() {
    Vue.prototype.$bus = this;
  }
}).$mount('#app')

• 组件A，接收组件B传递信息，在事件总线中挂载方法，等待组件B回调该方法

<template>
  <div>
    <span>组件A</span>
    <span>接收组件B的数据：</span> 姓名：<span>{{ name }}</span> 性别<span>{{ sex }}</span>
  </div>
</template>

<script>
export default {
  name: "ComponentA",
  data() {
    return {
      name: "",
      sex: "",
    };
  },
  methods: {
    //处理接收组件B的数据
    receviceComponentBData(name, sex) {
      this.name = name;
      this.sex = sex;
      console.log(name, sex);
    },
  },
  mounted() {
    //在事件总线中挂载事件
    this.$bus.$on("componentATransData", this.receviceComponentBData);
  },
  beforeDestroy(){
    //销毁该组件在事件总线中挂载的事件
    this.$bus.$off("componentATransData");
  }
};
</script>

• 组件B，回调组件A在全局总线中挂载的方法，将数据信息传递给组件A

<template>
  <div>
    <p>B组件</p>
    姓名：<span>{{ name }}</span> 性别<span>{{ sex }}</span>
    <button @click="transDataToCompoentA">将数据传递给组件A</button>
  </div>
</template>

<script>
export default {
  name: "ComponentB",
  data() {
    return {
      name: "王祎初",
      sex: "女",
    };
  },
  methods: {
    transDataToCompoentA() {
      //回调组件A在全局事件总结中挂载的方法
      this.$bus.$emit("componentATransData", this.name, this.sex);
    },
  },
};
</script>

小结

• 适用场景：适用于所有组件间的通信
• 如何实现：

1. 在应用入口文件main.js注册全局事件总线：

	new Vue({
	  render: h => h(App),
	  //注册全局事件总线，$bus就是当前应用的vm
	  beforeCreate() {
	    Vue.prototype.$bus = this;
	  }
	}).$mount('#app')

2. 数据消费方：在数据接收的组件中挂载方法在全局事件总线上，并做好接收数据处理，并建议在组件销毁前注销挂载的事件

  methods: {
    //处理接收组件B的数据
    receviceComponentBData(name, sex) {
      this.name = name;
      this.sex = sex;
      console.log(name, sex);
    },
  },
  mounted() {
    //在事件总线中挂载事件
    this.$bus.$on("componentATransData", this.receviceComponentBData);
  },
  beforeDestroy(){
    //销毁该组件在事件总线中挂载的事件
    this.$bus.$off("componentATransData");
  }

3. 数据生产方：在数据产生的组件回调挂在在全局事件总线的方法，将数据传递给数据接收方组件

	transDataToCompoentA() {
	   //回调组件A在全局事件总结中挂载的方法
	   this.$bus.$emit("componentATransData", this.name, this.sex);
	},