Vue2进阶篇-消息订阅与发布（pubsub版）

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、消息的订阅与发布（pubsub版）

1. 什么是消息的订阅与发布？

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

2. 使用方法

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

代码示例：

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() {
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

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:'男',
			}
		},
		methods: {
			sendStudentName(){
				pubsub.publish('hello',666,777,888)
			}
		},
	}
</script>

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通