Vue框架之消息订阅与发布

1.是一种组件间的通信方式，同事件总线一样适用于任意组件间的通信。

2.使用步骤：

         2.1.安装pubsub,输入```npm i pubsub-js```;

        2.2.引入: ```import pubsub from pubsub-js```;

3.接受数据：

        3.1.若A是接受数据的组件，则在A中订阅消息，并且订阅的回调要留在A组件自身。

简单使用模板：

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

4.发送数据：

        4.1.```pubsub.publish("xxx",this.demo)```

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

代码实例：

Student(发送数据)子组件:

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		methods: {
			sendStudentName(){
				//发送数据
				pubsub.publish('hello',666)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

School(接受数据)子组件:

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<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)
			})
		},
		beforeDestroy() {
            //调用beforeDestroy钩子在订阅完成后取消订阅
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>