Vue学习笔记-消息订阅与发布(pubsub)

消息订阅与发布(pubsub)

1. 一种组件间的通信方式，适用于任意组件间通信

2. 使用步骤：

   1. 安装pubsub第三方库npm i pubsub-js

   2. 在组件中引入import pubsub from 'pubsub-js'

   3. 数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身

   methods:{
   	/*
   	自定义回调函数，第一个参数为订阅的消息名称，第二个参数为消息发布方发布的数据
   	*/
   	callFun(msgName,data){
   		...
   	}
   ]
   mounted(){
   	/*订阅消息，第一个参数为自定义的消息名称，
   	第二个参数为自定义的回调函数
   	（如果写匿名函数，需要写成箭头函数，这样能保证this对象是Vue实例）
   	返回值为订阅消息的id，将其赋给Vue实例，方便以后销毁
   	*/
   	this.pubid = pubsub.subscribe('msgName',this.callFun)
   },
   beforeDestory(){
   	//建议在组件销毁时取消订阅
   	pubsub.unsubscribe(this.pubid)
   }

   4. 数据传递方（B组件）:B组件发布消息-->在需要传递数据的函数中添加如下代码:

   pubsub.publish('msgName',data)