在Vue中实现消息订阅与发布(pubsub)

首先需要安装一个库

1.当在终端运行过npm run serve后，按下Ctrl+C退出终端

        

2.然后会出现终止批处理操作选择yes

        

3.输入npm i pubsub-js (当然也有其他的库，自己选择)

4.安装成功

        

 消息订阅与发布(pubsub)

        1.一种组件间通信方式，适用于任意组件间通信。
        2.使用步骤：
                1.安装pubsub：npm i pubsub-js
                2.引入：import pubsub from 'pubsub-js'     在A组件和B组件

        
        3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
            这是一种方法：

        

        第二种方法：

        
        4.提供数据：pubsub.publish('xxx',数据)  在B组件

                
        5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pubId)去取消订阅

         

 运行结果：

 所有代码：

        组件A：

<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(){
			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: aquamarine;
		padding: 5px;
	}
</style>

 组件B：

<template>
	<div class="test">
		<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:'男'
			}
		},
		methods:{
			sendStudentName(){
				pubsub.publish('hello',666)
			}
		}
	}
</script>
<style lang="less" scoped>
	.test{
		background-color: orchid;
		padding: 5px;
		margin-top: 30px;
	}
	 
</style>