总线bus的使用

bus其实有很多种使用方法，但是原理都是一样，就是创建一个空的Vue实例，挂载在Vue原型prototype上。
以下几种方法都是A组件传值给B组件，不再赘述

使用方法1

1）在main.js中

const Bus = new Vue()
Vue.prototype.Bus = Bus

2）因为在main.js中引入的就相当于在全局引入，所以在各个组件中使用的时候就不用再引一遍了，话不多说，直接使用
A组件：

this.Bus.$emit('事件名',data)

B组件：

this.Bus.$on('事件名',(data)=>{      //回调函数
	console.log(data);              //data为传过来的值
}) 

使用方法2

1）main.js中

const Bus = new Vue()
new Vue({
	el:'#app',
	data (){
		return{
			Bus
		}
	}
})

2）使用
A组件：

this.$root.Bus.$emit('事件名',data)

B组件：

this.$root.Bus.$on('事件名',(data)=>{      //回调函数
	console.log(data);              //data为传过来的值
}) 

这里补充一下，$parent访问的是最近一级的父组件的属性和方法，$root访问的是根父组件的属性和方法。

使用方法3

1）新建一个bus.js文件

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

2）使用
A组件：

import Bus from '.bus.js'
Bus.$emit('事件名',data)

B组件：

import Bus from '.bus.js'
Bus.$on('事件名',(data)=>{      //回调函数
	console.log(data);              //data为传过来的值
})