Vue components are very common with parent-child component communication and brother component communication. The communication between parent and child components is very simple. The parent component will pass data down to the child component through props. When the child component has something to tell the parent component, it will tell the parent component through the $emit event.
But the two pages have no relationship between introduction and introduction, how should they communicate?
If our application does not need a library like Vuex to handle data communication between components, we can consider the event bus in Vue, namelyEventBusTo communicate.

Use of EventBus
1. Initialization(There are two ways), first you need to create an event bus and export it so that other modules can use or monitor it.
(1) Create a new .js file, such as event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

(2) EventBus can be initialized directly in main.js in the project

// main.js
Vue.prototype.$EventBus = new Vue()

Note that the EventBus initialized in this way is a global event bus.
2. Send event
Suppose you have two Vue pages that need to communicate: A and B. The A page binds a click event to the button, and sends a message to notify the B page.

<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("message", 'Message from page A');
    }
  }
}; 
</script>

EventBus.$emit(‘message’,data) // This message is a custom event name, and data is the data you want to pass.

3. Receive events
Next, we need to receive this message in page B.

<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("message", (msg) => {
      // Message sent by A
      this.msg = msg;
    });
  }
};
</script>

EventBus.$on('message',msg=> {
　　console.log(msg)　　　
 })

Note: The name of the event sent and monitored must be the same, and msg is the acquired data. The first parameter is the event name, the second parameter is the method

In the same way, we can also send messages from page B to page A. Two methods are mainly used here:

// send messages
EventBus.$emit(channel: string, callback(payload1,…))

// listen to receive messages
EventBus.$on(channel: string, callback(payload1,…))

4. Remove event listener
If you want to remove the event listener, you can do as follows:

import { 
  eventBus 
} from './event-bus.js'
 beforeDestroy(){
     EventBus.$off('message')
 }

Use the $off method of the vue instance to clear eventBus in the vue life cycle beforeDestroy or destroyed
Global eventBus

// main.js
Vue.prototype.$EventBus = new Vue()

Two methods, $on and $emit, are used in this particular bus. One is used to create emitted events, which is $emit; the other is used to subscribe to $on:
Then we can use this.$ bus.$emit("sendMsg", ‘I am a web show’) on a Vue page, and use this on another Vue page

this.$EventBus .$on('sendMsg', function(value) {
  console.log(value); // I am a web show
})

You can also use this.$ EventBus .$off(‘sendMsg’) to remove event listeners.
Note: Use the $off method of the vue instance to clear eventBus in the vue life cycle beforeDestroy or destroyed