[JavaScript知识库]Vue全局事件总线-任意组件间通信

基础概念：全局事件总线

假设有一个X 它不属于任何一个组件，假设组件A想要接收到组件B的数据，组件A 可以写一些代码通过给这个X绑定自定义事件，假设为testA，组件B就可以触发这一个自定义事件并且携带数据。

符合X要求：

1 所有的组件都可以触碰到这个X

2 X可以调用到$on $off $emit 绑定 解绑 触发...

1X放到什么地方可以让所有组件触碰的到？

首先我们可以想到window,对象 ，但是放在window上会有缺陷。因为会一直跟随着整个应用

我们还可以想到Vue的原型对象 在main.js

Vue.prototype.$bus = X

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
})

2 调用到$on ..... $on又在什么地方

Vue的原型对象 例如我们可以输出一下 查看

在main.js 中

Vue.config.productionTip = false

console.log(Vue.prototype)
new Vue({
  render: h => h(App)
}).$mount('#app')

?

我们需要把整个X值设置成Vue的原型对象，即vm(vue实例对象)或者vc（Vue组件对象）

组件对象vc实现需要我们手动实现一个组件?

const Demo = Vue.extend({})
const d = new Demo()
Vue.prototype.x = d

或者使用vm 利用beforeCreate生命周期函数

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //此处的this 正好指向vm
	},
})

案例:

组件A中

mounted() {
			// console.log('School',this)
			this.$bus.$on('testA',(data)=>{
				console.log('我是A组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('testA')
		},

组件B中

data() {
			return {
				data:000
			}
		},
		methods: {
			sendData(){
				this.$bus.$emit('testA',this.data)
			}
		},