什么是全局事件总线？

目录

第一步，要认所有的组件看见一个共同东西我们叫----bus

第二步，在student.vue里加上

第三步，在school.vue里改变 sendSchoolName()

最后，

---

之前的代码可见点击跳转

可以实现任何组件之间的数据交流

第一步，要认所有的组件看见一个共同东西我们叫----bus

bus不仅仅有公交车的意思，还有

 在main.js里

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

Vue.config.productionTip = false;

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

这段代码是主要的： 

  beforeCreate() {
    Vue.prototype.$bus = this; //安装全局事件总线
  },

第二步，在student.vue里加上

  mounted() {
    this.$bus.$on("hello", (data) => {
      console.log("收到了school数据", data);
    });
  },

第三步，在school.vue里改变 sendSchoolName()

    sendSchoolName() {

      // this.$emit("liujiayi", this.schoolName);

      this.$bus.$emit("hello", this.schoolName);

    },

已经完成了大部分 

最后，

最好加上这段代码，解绑

 

  beforeDestroy() {

    this.$bus.$off("hello");

  },