First, introduction to eventbus

EventBus is also known as the event bus. In Bue, you can use EventBus as a communication bridge concept, just as all components share the same event center, you can register to send events or receive events to the center, so components can notify other components in parallel, but also too Convenience, if used inadvertently, it will cause a disaster that is difficult to maintain, so Vue provides a more complete Vuex as a state management center, raising the concept of notification to the shared state level, so we must be cautious when using eventbus.

Second, the problem needs to be solved

A problem has been encountered in the project. After the page jumps, the new page is not refreshed. After the first load, the page is loaded, and then the data returned and the page is not changed. The logic is that the page jump will take the parameters, the new page will display the content according to this parameter on the page, if not refreshed later, the data displayed on the page will not change.
So I need to re-call the method of loading the table data after the page jump, just the eventbus bus can meet my requirements, I initiate an event in the page jump method, in the new The page's mounted method (the method that needs to be executed when the page is loaded) accepts and responds to the event, recalling the method of table data loading, so that my problem can be solved.

Third, how to use

(1) Create a js file of EventBus

/ / Create a new js file named eventbus, add the following code in the file
import Vue from 'vue'
export default new Vue;

(two) global call

Import eventbus in main.js and mount it on the prototype of vue

import bus from './utils/eventBus'
Vue.prototype.bus = bus;

(3) Sending an event

Send an event where the event is triggered, for example, I add the code to send the event where the page jumps

//clazzCourseCode is the event name
this.bus.$emit("clazzCourseCode");

(4) Receiving events and responding

mounted() {
         / / Here write method call, the method in mounted () {} indicates that the method needs to be executed when the page is loaded.
         //bus bus response event--the event name needs to be the same
    this.bus.$on("clazzCourseCode", () => {
         / / Method of loading table data
      this.queryMember();
    });
  },

(5) Untieing the incident

 beforeDestroy() {
         / / Need to unbind the event before the component is destroyed. Otherwise there will be a problem with repeated trigger events
    this.bus.$off("clazzCourseCode");
  },