Data bus realizes the communication between brother components

Define a data bus bus.js,Abro Give the components to Bbro Component transfer value

bus.js

import Vue from 'vue'

const busData = new Vue();

export default busData

Abro.vue

import busData from './bus'
export default {
    
	data(){
    return {
     title:'this is title!' } }
	methods:{
    
		onClick(){
     //  Define a click event for value transfer 
			//  every last vue example   He will have one $emit Method , At the same time, he will also have a person in charge of monitoring $on Method 
			busData.$emit('addItem', this.title)
		}
	}
}

Bbro.vue

import busData from './bus'
export default {
    
	data(){
    return {
     title:'this is title!' } }
	mounted(){
    
		//  stay vue When the component is hung , To monitor Abro.vue As defined in addItem Method 
		//  Once this event is triggered , Let's go and perform a isComing The method function of 
		busData.$on('addItem', this.isComging)
	},
	methods:{
    
		isComging(title){
     // title yes Abro.vue The parameters passed in 
			console.log('title yes Abro Transmitted value ')
		}
	},
	beforeDestroy(){
    
		//  Listen when the component is hung , Perform a unbinding when the component is destroyed , This will not cause potential memory leaks .
		busData.$off('addItem', this.isComging)
	}
}