vue消息订阅与发布

1.知识点

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

2.使用步骤

“消息订阅与发布”可依赖的第三方很多，这里使用pubsub-js库

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)取消订阅

问题：“全局事件总线”和“消息订阅与发布”都可以实现任意组件间通信，那用哪个好？

 答案：推荐使用“全局事件总线”，因为它是vue提供的，完全使用的vue技术，而“消息订阅与发布”则是第三方。

使用语法

消息订阅 语法

import pubsub from 'pubsub-js'

mounted() {
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
	// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data) //msgName为事件名hello data才是接收到的数据
})
},
beforeDestroy() {
	// this.$bus.$off('hello')   
	pubsub.unsubscribe(this.pubId)  //这里注意不是跟全局事件总线一样是hello事件名
}

消息发布 语法

import pubsub from 'pubsub-js'

pubsub.publish('hello',666)

3.注意点：

1.取消订阅方式和“全局事件总线”不同，取消订阅指定订阅返回的id，且每次返回的id都不同，而“全局事件总线”指定的是“自定义事件名称”

2.订阅回调配置一定要使用箭头函数或者外部定义方法，在订阅中引用也行，千万不要使用普通函数，因为普通函数中this不指代vc，而是undefine，这一点跟“全局事件总线”中的注意点很像，但还是略有不同

3.消息订阅会接收到2个参数，第1个参数为消息名称，第2个参数才是传递过来的值，如写法1，但是实际msgName参数1他跟用不到它，所以可使用下划线“_”占个位，如写法2

写法一：

this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
	// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})

写法二：

this.pubId = pubsub.subscribe('hello',(_,data)=>{
	// console.log('有人发布了hello消息，hello消息的回调执行了',_,data)
})

4.箭头函数中的名称(msgName,data)=>{}可以随便写，但是避免使用使用关键字名字

 完整代码

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>

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>

参考文章：vue2知识点：消息订阅与发布_vue2消息订阅与发布_刘大猫.的博客-CSDN博客