25.消息订阅与发布——PubSub-js

1.什么是PubSub-js？

PubSub.js是一个用Javascript编写的基于主题的发布/订阅库。

PubSubJS有同步解耦，所以主题是异步开发的。这有助于使你的程序保持可预测性，因为在消费者处理主题时，主题的发起者不会被阻止。

2.主要特点

无依赖

同步解耦

ES3兼容。PubSub-js能够在任何可以执行JavaScript的地方运行。浏览器、服务器、电子阅读器、手机、游戏机

AMD/Common.JS模块支持

不修改订阅者（jquery自定义事件修改订阅者）

易于理解和使用

小于1kb压缩

3.安装PubSubJS

有几种方法可以获取PubSubJS

1.通过npm（npm install pubsub-js）安装

4.使用PubSubJS

School组件

<template>
	<div class="school">
	</div>
</template>

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

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

Student组件

<template>
	<div class="student">
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				studentName: "张三"
			}
		},
		mounted() {
		},
		methods: {
			sendStudentName(){
				pubsub.publish('hello',this.studentName)
			}
		},
	}
</script>

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

App组件

<template>
	<div class="app">
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
			}
		}
	}
</script>

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