25. Message subscription and publishing - PubSub JS

1. What is? PubSub-js？

PubSub.js It's a use. Javascript Topic based publishing written by / Subscription library .

PubSubJS With synchronous decoupling , So the theme is developed asynchronously . This helps keep your program predictable , Because when consumers deal with topics , The originator of the theme will not be blocked .

2. The main features

Without relying on

Synchronous decoupling

ES3 compatible .PubSub-js Be able to execute at any time JavaScript Where to run . browser 、 The server 、 E-readers 、 mobile phone 、 console

AMD/Common.JS Module support

Do not modify subscribers （jquery Custom events modify subscribers ）

Easy to understand and use

Less than 1kb Compress

3. install PubSubJS

There are several ways to get PubSubJS

1. adopt npm（npm install pubsub-js） install

4. Use PubSubJS

School Components

<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(' Someone has released hello news ,hello The callback of the message executes ',msgName,data)
			})
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

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

Student Components

<template>
	<div class="student">
		<button @click="sendStudentName"> Give the students their names School Components </button>
	</div>
</template>

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

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

App Components

<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>