数据总线bus实现兄弟组件之间的通信

定义一个数据总线bus.js，Abro组件给Bbro组件传值

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(){
     // 定义一个点击事件进行传值
			// 每一个vue实例 他都会有一个$emit方法，同时他也会有负责监听的一个$on方法
			busData.$emit('addItem', this.title)
		}
	}
}

Bbro.vue

import busData from './bus'
export default {
    
	data(){
    return {
     title:'this is title!' } }
	mounted(){
    
		// 在vue组件进行挂在的时候，去监听Abro.vue中定义的addItem方法
		// 这个事件一旦触发的话，我们就去执行一个isComing的方法函数
		busData.$on('addItem', this.isComging)
	},
	methods:{
    
		isComging(title){
     // title是Abro.vue传递过来的参数
			console.log('title是Abro传过来的值')
		}
	},
	beforeDestroy(){
    
		// 组件挂在的时候进行监听，在组件销毁的时候进行一个解绑，这样就不会造成潜在内存泄漏的问题。
		busData.$off('addItem', this.isComging)
	}
}