[JavaScript知识库]Vue-test:14_src_消息订阅与发布

>>消息订阅与发布

>>理解

????????1. 这种方式的思想与全局事件总线很相似

????????2. 它包含以下操作:

????????????????(1) 订阅消息 --对应绑定事件监听

????????????????(2) 发布消息 --分发事件

????????????????(3) 取消消息订阅 --解绑事件监听

????????3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

>>使用 PubSubJS

????????1. 在线文档: https://github.com/mroderick/PubSubJS

????????2. 下载: npm install -S pubsub-js

????????3. 相关语法

????????????????(1) import PubSub from 'pubsub-js' // 引入

????????????????(2) PubSub.subscribe(‘msgName’, functon(msgName, data){ })

????????????????(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用

????????????????(4) PubSub.unsubscribe(token): 取消消息的订阅

?App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

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

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

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

School.vue

<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() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
			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>

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

Student.vue

<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:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				// this.$bus.$emit('hello',this.name)
				pubsub.publish('hello',666)
			}
		},
	}
</script>

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

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
})

## 消息订阅与发布（pubsub）

1. ?一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 使用步骤：

? ?(1). 安装pubsub：```npm i pubsub-js```

? ?(2). 引入: ```import pubsub from 'pubsub-js'```

? ?(3). 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>

? ? ? ```js

? ? ? methods(){

? ? ? ? demo(data){......}

? ? ? }

? ? ? ......

? ? ? mounted() {

? ? ? ? this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

? ? ? }

? ? ? ```

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

? ?(5). 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>