What is the global event bus?

Catalog

First step , To recognize that all components see a common thing, we call it ----bus

The second step , stay student.vue Riga

The third step , stay school.vue Change in  sendSchoolName()

Last ,

---

The previous code is visible Click the jump

It can realize the data exchange between any components

First step , To recognize that all components see a common thing, we call it ----bus

bus It's not just about buses , also

  stay main.js in

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; // Install the global event bus 
  },
});

This code is the main ： 

  beforeCreate() {
    Vue.prototype.$bus = this; // Install the global event bus
  },

The second step , stay student.vue Riga

  mounted() {
    this.$bus.$on("hello", (data) => {
      console.log(" received school data ", data);
    });
  },

The third step , stay school.vue Change in  sendSchoolName()

    sendSchoolName() {

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

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

    },

Most of the work has been done  

Last ,

You'd better add this code , Unbundling

 

  beforeDestroy() {

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

  },