Vue33-消息订阅与发布（pubsub）

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

<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>

<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>
="less" scoped>
 .student{
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
 }
</style>