一.全局事件总线(GlobalEventBus)
一种可以在任意组件间通信的方式,本质上就是一个对象,它必须满足以下条件
1. 所有的组件对象都必须能看见他
2. 这个对象必须能够使用 $on $emit $off 方法去绑定、触发和解绑事件
使用步骤
1. 定义全局事件总线
new Vue({
beforeCreate() {
Vue.prototype.$bus=this//安装全局事件总线,$bus 就是当前应用的 vm
},
})
2. 使用事件总线
a. 接收数据:A组件想接收数据,则在A组件中给 $bus 绑定自定义事件,事件的回调留在A组件自身
export default {
methods(){
demo(data){ ... }
}
mounted() {
this. $bus. $on('xxx', this.demo)
}
}
b. 提供数据:this.$bus.$emit('xxx',data)
3. 最好在 beforeDestroy 钩子中,用$off()去解绑当前组件所用到的事件
3.11.消息的订阅与发布(基本不用)
消息订阅与发布(pubsub)消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信
使用步要
1. 安装pubsub:npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
使用方法:
第一种
methods(){
demo(msgName,data){
}
},
mounted() {
this.pubId = pubsub.subscibe('xxx',this.demo)
},
第二种
mounted(){
this.pubId = pubsub.subscribe('hello',(msgName,data) =>{
})
}
4. 提供数据:pubsub.publish('xxx',data)
5. 最好在 beforeDestroy 钩子中,使用pubsub.unsubscribe(pid)取消订阅