消息订阅与发布简介

1、功能：一种组件间通信方式，适用于任意组件之间的通信

2、安装：npm install pubsub-js

3、使用步骤：

（1）引入：（谁用谁引用）import pubsub from 'pubsub-js'

（2）接收数据（数据的接收方）：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods:{
    demo(data){....}
}
.......
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息，xxx为订阅事件的名称
}

//如果要写的更加完善最好在添加解绑功能
beforeDestroy(){
    pubsub.unsubscribe(this.pid)
}

（3）提供数据（数据发送方）：pubsub.publish('xxx',数据)

案例：

1、需求：将School地址传给学生

2、实现：

School.vue（数据发送方）

<template>
	<!-- 组件的结构 -->
	<div class="school">
		<h2>学校姓名：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<!-- 触发提供数据的标签 -->
		<button @click="sendAddressToStudent">点击将学校地址传给学生</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷atguigu',
				address:'北京',
			}
		},
		methods:{
			sendAddressToStudent(){
				//提供数据
				pubsub.publish('ToStudentAddress',this.address)
			}
		}
	}
</script>

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

Student.vue（数据接收方）

<template>
	<!-- 组件的结构 -->
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				sex:'男',
			}
		},
		methods:{
			//事件的回调函数
			// getSchoolAddress(data){
			// 	console.log('收到来自School的地址信息：',data)
			// },
		},
		mounted(){
			//接收数据，这里也可以将回调功能写到methods中，但如果要写在subscribe中需要写成箭头函数，不然this会出错
			this.pid = pubsub.subscribe('ToStudentAddress',(msgName,data) => {
                                //这里msgName是订阅消息的名称，即'ToStudentAddress'，后面的data才是真实的数据
				console.log('接收到的学校地址是：',data)
			})
		},
		beforeDestroy(){
			pubsub.unsubscribe(this.pid)
		}
	}
</script>

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

3、效果：点击按钮后发现信息传递成功

Vue2--Vue脚手架消息的订阅与发布

消息订阅与发布简介

案例：