共计 2004 个字符，预计需要花费 6 分钟才能阅读完成。
之前咱们实现了子组件向父组件传递数据，很显著，这是不够的，看完这篇博客，无论哪两个组件之间传递和接收数据都没有问题！
全局事件总线（实用于任意组件间通信）
原理：（看图了解）
次要就是通过往 x 身上放事件，而后事件的回调要放在想要获取数据的组件身上，谁要传数据就调用 x 身上对应的事件并往里面存数据就能够了，相当于一个中间商（哎，不得不说，它一出世就被利用了）
当然不是谁都能但此大任的，x 须要具备两个条件：
所有组件都能够看到
x 身上有 on、on、on、off、$emit 办法
对立给 x 命名为 $bus
咱们将其定义在 main.js 文件中，创立在 vm 的实例对象身上，因为 vm 实例对象只有一个
创立全局事件总线有两种办法：
1、
const Demo = Vue.extend({})
const d = new Demo()
Vue.prototype.$bus = d(定义在创立 Vue 的里面)
2、
new Vue({
......
beforeCreate(){Vue.prototype.$bus = this // 装置全局事件总线，$bus 就是以后利用的 vm},
})new Vue({render: h => h(App),
beforeCreate(){Vue.prototype.$bus = this // 装置全局事件总线}
}).$mount('#app')
应用事件总线：
接收数据：A 组件想接收数据，则在 A 组件中给 $bus 绑定自定义事件，事件的回调留在 A 组件本身
mounted() {
// 或者前面指向的是一个办法，办法在 methods 外面定义
// 在全局事件总线 bus 中绑定一个 hello 事件，前面的回调是箭头函数，用于接收数据 this.bus 中绑定一个 hello 事件，前面的回调是箭头函数，用于接收数据 this.bus 中绑定一个 hello 事件，前面的回调是箭头函数，用于接收数据 this.bus.$on(“hello”, (value) => {
console.log(“ 我获取到了数据 ”, value);
});
},
提供数据：
methods: {
sentMyName(){
// 在该办法中触发 hello 这个事件，把数据传过来
this.bus.bus.bus.emit(‘hello’,this.myName)
}
},
用这个办法的益处就是！咱们就不须要再在标签里绑定自定义事件了，间接把事件在 $bus 里创立，再在要传数据的中央调用它就能够了！
当然还有个留神点，如果某个事件或绑定事件的组件你不必了，那要养成随时解绑的好习惯！不要占着空间不必，会导致空间节约从而呈现卡顿
最好在 beforeDestroy 钩子中，用 $off 去解绑以后组件所用到的事件
在绑定事件的组件中解绑（即须要数据的组件）
beforeDestroy() {
// 解绑 bus 中名为 hello 的事件 this.bus 中 名为 hello 的事件 this.bus 中名为 hello 的事件 this.bus.off(“hello”); }, 切记！this.bus.off()外面肯定要写要解绑的事件，不然 off() 外面肯定要写要解绑的事件，不然 off()外面肯定要写要解绑的事件，不然 bus 中所有的事件都会被解绑！结果很重大！！！！
音讯订阅与公布（实用于任意组件间通信）
原理：
简略了解：
须要数据的组件：订阅音讯
提供数据的组件：公布音讯
这个相比第一种办法就要麻烦那么一丢丢了，它须要装置 pubsub，咱们关上 VScode 的控制台，输出 npm i pubsub-js，进行装置
在传数据和接收数据的组件中都要通过 import pubsub from ‘pubsub-js’ 引入这个文件
而后就能够开始应用了
接收数据：A 组件想接收数据，则在 A 组件中订阅音讯，订阅的回调留在 A 组件本身
this.pubId = pubsub.subscribe(‘hello’,(msgName,data)=>{
console.log(‘ 我接管到数据了 ’,data);
})
复制代码
这里有一个留神点，那就是回调函数的第一个参数 msgName，代表的是 hello，即订阅的音讯名，这个必须要写，因为默认第一个参数就是音讯名，第二个参数才是数据，前端培训所以不论如何，第一个要占个位，你能够给它取个名字，或者用下划线 _ 占位
提供数据：
methods: {
sentMyName(){
pubsub.publish(‘hello’,this.myName)
}
},
当然如果订阅的音讯不必了，也要将其删除，不能占用空间，然而删除订阅音讯不是用 $off，而是 publish.unsubscribe(this.pubId)，其中 this.pubId 是每个音讯创立的时候都会有一个 id，就像定时器一样，咱们删除就删除它对应的 id 号就能够了
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
},
比照两者咱们用的更多的是前者，因为它是 Vm 外面创立的，不须要再导入包
最初再分享一个办法：
