VUE's EventBus-Event bus bus

In Vue, the data transmission between components is generally passed on the parent -child component, but in the actual application of the project, there is also no relationship of components that need to be passed on. Methods to implement. At this time, you can use EventBus to implement.

EventBus is equivalent to a global event warehouse, and any component can get this event.
The way of use is as follows:
We have a demo, and there are two unrelated A components and B components. Now the data of components B wants to use the data in a component A. We can use this way ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Step1 initialization
We can create an eventbus.js file in the Utils directory

import Vue from 'vue'
export default new Vue()

Step2 sends data to eventbus in components A
Eventbus. $ EMIT (the event name, parameter passed)

<template>
    <div>
      <h1>A  Component</h1>
      <router-link to="/about">About</router-link>
    </div>
</template>
<script> 
import { EventBus } from "@/utils/eventBus.js";
export default {
  data () {
    return {}
  },
  beforeDestroy () {
  	// Send the incident HOMEDATA to the global EventBus and bring the data on the page A with the data
    EventBus.$emit("homeData", 'HOME');
  }
}; 
</script>

STEP3 receives data in components B
Eventbus. $ ON (Monitoring event name, callback function)

<template>
  <div>
    <h1>Currently---About</h1>
    <router-link to="/">Home</router-link>
  </div>

</template>
 
<script> 
import { EventBus } from "@/utils/eventBus.js";
export default {
  data(){
    return {}
  },
  created () {
  	// Listen to the event A component to send to the event in the global Eventbus HomeData
    EventBus.$on('homeData', data => {
      console.log('Departure on event', data)
    })
  },
  // Remove the monitoring incident before the destruction of the B component
  beforeDestroy() {
    EventBus.$off("homeData");
  }
};
</script>

The above is the simple use of EventBus, but if in component A, sending event eventbus. $ EMIT () is written in the Created hook function or other places, which will occur when the first trigger, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B, B. ON event in the component will not be executed, this is because:
When we are still in components, component B has not yet been generated, that is, the events monitored in Created in component B have not been triggered. At this time, when the EMIT event in your A is actually not monitored to hear
so weYou can write the EMIT event in BeforeDestroy or Destroyed

Intelligent Recommendation

Guava: Event Bus EventBus

EventBus literal translation is an event bus, which uses the publish-subscribe model supports communication between components, do not need to explicitly register a callback, more flexible than the ob...

Android event bus: EventBus

Recently another project to maintain, are relatively old variety of libraries used, eventbus using the 2.x version, then upgrade to one, by the way read the next eventbus source, make a note of this: ...

EventBus of Android event bus

First language EventBus is an Android-optimized publish/subscribe message bus, which simplifies communication between components in the application, and between components and background threads. For ...

Event bus: EventBus

When non-parent-child components need to communicate, in addition to vuex, there isEvent busUp Introduction EventBus is also called event bus. In Vue, you can use EventBus as a communication bridge co...

EventBus event processing bus

Write first EventBus is an event processing bus, which can replace Android's traditional Intent, Handler, Broadcast or interface functions to transfer data and execute methods between Fragment, Activi...