Vue components emit events ($emit) and event Bus($ON)

In the project, there is a requirement to switch different tables according to multiple drop-down boxes. Frequent sibling component values are passed, which uses component trigger 1. A new Js file is created to pass values as a bus, exposing a VUE instance. I can import it globally in main.js, I just import it in the components I need.

2. Add it to components

3 Launch in A module

Let search = {reportLevel: parseInt(this.reportLevel), // Object 1 Service Name 2 Product Service Number 3 this.buName, sendTime: this.time, }; searchBus.$emit("getSearch", search); },Copy the code

B Component

      search.$on("getSearch", (data) => {
        this.search = data;
        this.getData(data);
      });
    },
Copy the code

3. The pit I encountered was that it would receive $on multiple times,

The solution is to exploit
$On the beforeDestroy or Destroy cycle of the component that receives the event, use$off()

BeforeDestroy () {search.$off('getSearc')},Copy the code