是什么？
是一种组件间通信的方式，适用于任意组件间通信
?
?怎么安装全局总线？
一开始在main.js里面，但后来使用beforeCreate(){}钩子，在这个钩子中，是在数据监测，数据代理之前创建，此时无法通过Vue实例访问到data中的数据，methods中的方法，模板还没解析。
Vue.prototype.$bus?=?this，将Vue的原型对象的属性$bus指向当前的Vue实例对象，因为Vue的原型对象的属性的方法都可以被Vue实例对象和VueComponent组件实例对象访问得到，这里就涉及到Vue得原型对象与VueComponent得原型对象的原型关系，我之前画了一个图，可以方便理解一种重要的内置关系。?
const D = Vue.extend({})
const d = new D
Vue.prototype.x=d
new Vue({
el:'#app',
render: h => h(App)
})new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
})这样子Vue实例对象和VueComponent实例对象都可以访问到Vue原型对象上的$on,$off,$emit方法了！
怎么使用全局事件总线？
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身，比如进行兄弟组件间通信，在School组件中想要得到Student组件的学生名字，在组件挂载后进行绑定hello事件，使用箭头函数准备接受传过来的参数。
mounted(){
this.$bus.$on('hello',(data)=>{
console.log('school组件接收到了',data)
})
},或者【注意this指向问题】?
methods(){
demo(data){...}
}
...
mounted(){
this.$bus.$on('hello',this.demo)
}2.提供数据：B组件去触发事件。比如在Student组件中准备一个按钮，绑定send方法，点击按钮去触发这个事件。
methods:{
send(){
this.$bus.$emit('hello',this.name)
}
}值得注意的一点是：最好在beforeDestory(){}钩子中，用$off去解绑当前组件所用到的事件，所以在School组件中去解绑hello事件
beforeDestroy() {
console.log('hello事件被解绑')
this.$bus.off('hello')
},?
完整代码如下：
main.js
import Vue from 'vue'
import App from './App.vue'
//关闭vue生产模式
Vue.config.productionTip = false
//全局事件总线:任意组件通信
// Vue.prototype.x={
// a:1,
// b:2
// }
// const D = Vue.extend({})
// const d = new D
// Vue.prototype.x=d
// console.log('Vue.prototype.x',Vue.prototype.x);
// console.log('Vue.prototype',Vue.prototype);
// console.log('Vue.prototype.__proto__==',Vue.prototype.__proto__==Object.prototype);
// console.log('Vue',Vue);
new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
})School.vue
<template>
<div class='demo title'>
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'HNU-----hnu',
address:'HN',
}
},
mounted(){
this.$bus.$on('hello',(data)=>{
console.log('school组件接收到了',data)
})
},
beforeDestroy() {
console.log('hello被销毁')
this.$bus.off('hello')
},
}
</script>
<style scoped>
.demo{
background-color:yellow;
}
</style>Student.vue
<template>
<div class='demo'>
<h1 class="title">{{msg}}</h1>
<h1>学生名字：{{name}}</h1>
<h1>学生年龄：{{myAge}}</h1>
<button @click="send">把学生名字传过去</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
msg:'欢迎!!!',
name:'江江',
myAge:18
}
},
methods:{
send(){
this.$bus.$emit('hello',this.name)
}
}
// mounted(){
// console.log('Student',this.x)
// }
}
</script>
<style lang='less'>
.demo{
background-color:pink;
.title{
font-size: 16px;
}
}
</style>