基础概念:全局事件总线
假设有一个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)
}
},