Vue核心 全局事件总线和消息的订阅与发布

全局事件总线

一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件

1. 所有组件对象都必须能看见它
2. 这个对象必须能够使用$on $emit $off方法去绑定、触发和解绑事件

使用步骤

1. 定义全局事件总线

   new Vue({
   	...
   	beforeCreate(){
   		Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm
   	}
   })

2. 使用事件总线

   • 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

     export default{
     	methods(){
     		demo(data){...}
     	}
     	...
     	mounted(){
     		this.$bus.$on('xxx',this.demo)
     	}
     }

   • 提供数据：this.$bus.$emit('xxx',data)

3. 最好在beforeDestroy钩子中，用$off()去解绑当前组件所用到的事件

消息的订阅与发布

消息订阅与发布（pubsub）消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

使用步骤

1. 安装pubsub：npm i pubsub-js

2. 引入：import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

   export default {
   	methods:{
   		demo(msgName, data){...}
   	}
   	...
   	mounted(){
   		this.pid = pubsub.subscribe("xxx",this.demo)
   	}
   }

4. 提供数据：pubsub.publish('xxx',data)

5. 最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅