VueComponent.prototype.proto === Vue.prototype

• 利用这个关系

main.js

Vue.prototype.xxx=7

子组件可以访问到xxx这个属性

test.vue

console.log('----',this.xxx)
// 结果是可以访问到Vue里面的原型对象的属性xxx，为7

main.js

 console.log('--main--',Vue.prototype.xxx = {x:111})

向Vue.prototype里添加一个xxx属性，这个属性指向一个对象

app.vue

 console.log('--app--',this.xxx.c=6)
console.log(this.xxx.god)

app.vue是test.vue的父组件，向app.vue添加一个c属性，可以查看到test.vue向Vue.prototype添加的属性

test.vue

console.log('--test--',this.xxx.c)
this.xxx.god='god'
//6

test.vue可以访问到app.vue的c属性，因为他们都是向Vue.prototype.xxx添加属性，所有子组件都可以访问到Vue.prototype里面的配置

父子组件可以查看到对方的属性

student.vue

console.log('--shool--',this.xxx.god)

子组件相互可以查看到对方的属性

那么我们就可以利用这个Vue.prototype让组件之间相互通信

为了迎合vue，我们将xxx属性命名为$bus

Vue.prototype.$bus

但是，每次我们都向Vue.prototype添加属性或方法后，我们才能使用，这样造成存在一堆的属性方法
现在我们不向Vue.prototype添加属性或方法后，而是把属性或方法放在组件本身，但却通过另外的组件调用它

一个组件调用另外的组件函数可以用$emit
test.vu调用student.vue的函数shoolTest

this.$bus.$emit('shoolTest')

student.vue接收别的数组的调用

this.$bus.$on('shoolTest',()=>{
       console.log('--shoolTest--')
    })

他们调用的时候可以加参数，

this.$bus.$emit('shoolTest','wwww')

接形参

this.$bus.$on('shoolTest',(data)=>{
       console.log('--shoolTest--',data)
    })

要想让组件的this.on、$emit等方法，就要在全局里面部署
main.js

 beforeCreate(){
    Vue.prototype.$bus = this
  }

在beforeCreate钩子添加是确保数据和事件没有开始之前就存在这个on、$emit等方法
this指的是vue这个实例对象