Vue中的消息订阅与发布（pubsub）

消息订阅与发布（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)去取消订阅。

代码演示

在a组件中订阅消息

<template>
  <div>
    <h1>当前年龄为{{age}}</h1>
    <Son/>

  </div>
</template>

<script>
import Son from './components/Son.vue'
import pubsub from 'pubsub-js'

export default {
  name: 'App',
  data() {
    return {
      age: 18
    }
  },
  components: {
    Son
  },
  methods: {
    add (age) {
      this.age += age
    }
  },
  mounted() {
      // 订阅消息
      this.pubId = pubsub.subscribe('add', (msgName, data) => {
        this.add(data)
      })
  },
  beforeDestroy() {
      // 在组件销毁之前 清除订阅消息
			pubsub.unsubscribe(this.pubId)
	},
}
</script>

<style>

</style>

 在b组件中提供数据

<template>
	<div class="school">
		<p>我是子组件</p>
		<button @click="demo">点击加1</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				number: 1
			}
		},
		methods: {
			demo() {
				// 提供数据
				pubsub.publish('add', this.number)
			}
		}
	}
</script>

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