组件通信之消息的订阅与发布

消息订阅与发布（pubsub）

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

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

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

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

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }
      

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

   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

3.注意

第一个参数是绑定事件名称，第二个参数才是传递的数据 订阅消息回调建议使用箭头函数，不然this指向undefied

4.代码实现

订阅者：

<script>
import pubsub from 'pubsub-js'
export default {
	name:'School',
	data() {
		return {
			name:'尚硅谷',
			address:'北京',
		}
		},
		mounted() {
		this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
			console.log(this)
			// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
		})
	},
	beforeDestroy() {
		// this.$bus.$off('hello')
		pubsub.unsubscribe(this.pubId)
	},
}
</script>

发布者

<script>
import pubsub from 'pubsub-js'
export default {
	name:'Student',
	data() {
		return {
			name:'张三',
			sex:'男',
		}
	},
	mounted() {
		// console.log('Student',this.x)
	},
	methods: {
                sendStudentName(){
			// this.$bus.$emit('hello',this.name)
			pubsub.publish('hello',666)
		}
	},
}