Vue2基础篇-29-全局事件总线（GlobalEventBus)

1. 简介

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

   new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   }) 
   

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

2. demo

2.1 安装全局事件总线

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";

// 关闭Vue的生产提示
Vue.config.productionTip = false;

// 创建Vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  beforeCreate() {
    //安装全局事件总线
    Vue.prototype.$bus = this;
  },
});

2.2 学生组件 绑定事件

<template>
  <div>
    <h2>学生名称为{{ StudentName }}</h2>
    <h2>学生地址为{{ StudentAddress }}</h2>
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      StudentName: "张三",
      StudentAddress: "金桥",
    };
  },
  mounted() {
    this.$bus.$on("sendSchoolName", (data) => {
      console.log("我是Student组件,收到了数据", data);
    });
  },
};
</script>
<style></style>

2.3 学校组件 发送数据

<template>
  <div>
    <h2>学校名称为{{ SchoolName }}</h2>
    <h2>学校地址为{{ SchoolAddress }}</h2>
    <button @click="sendSchoolName">将学校名称传递给学生</button>
  </div>
</template>
<script>
export default {
  name: "School",
  data() {
    return {
      SchoolName: "大学",
      SchoolAddress: "张江",
    };
  },
  methods: {
    sendSchoolName() {
      this.$bus.$emit("sendSchoolName", this.SchoolName);
    },
  },
};
</script>
<style></style>