消息订阅与发布(pubsub)

消息订阅与发布(pubsub)

1.一种组件间通信的方式，适用于任意组件间通信
2.使用步骤：
1）安装pubsub库：npm i pubsub-js
2)引入：import pubsub from ‘pubsub-js’
3.接收数据的写法: A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

//定义一个School组件用于接收Student组件传递过来的数据
<template>
  <div class="scl">
    <h2>学校名称：{{ schoolName }}</h2>
    <h3>地址：{{ addr }}</h3>
  </div>
</template>

<script>
// 给接收数据方引入组件
import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      schoolName: "牛逼大学",
      addr: "北京",
    };
  },
//方法一---------------
  mounted() {
    //设置const puId 是为了方便取消订阅的时候使用,放在this身上才可以被beforeDestroy里的方法读取到
    this.pubId = pubsub.subscribe("hello", function (msgName, data) {
      //消息以参数的形式被接受，当不配置参数的时候则传递的数据不能接收但是可以调用这个回调函数
      //该方法的第一个参数代表发布消息的名字，第二个及后面的才是传递的数据
      console.log("有人发布了hello消息，hello消息的回调执行了", msgName, data);
      //测试this是什么
      console.log(this); //输出为undefined因为这里的this是第三方库的this(用的普通函数)
      //如果要this为vue实例则最好用箭头函数，或者写成method方法形式的接收方法

//箭头函数：---------------------------------------------
// this.pubId = pub.subscribe('hello'(data)=>{
//console.log("有人发布了hello消息，hello消息的回调执行了", msgName, data)
//})----------------------------------------------------
    });
  },

//方法二------methods方法-------------------
//methods:{
//demo(msgName,data){
//console.log("有人发布了hello消息，hello消息的回调执行了", msgName, data)
  // }
//}
//mounted(){
//this.pubId = pubsub.subscribe('hello',this.demo)
//},
//-------------------------------------------

  beforeDestroy() {
    //消息订阅的方法有点像定时器，如果要取消订阅要通过id取消，所以可以给上面订阅方法一个id，方便取消绑定使用
    pubsub.unsubscribe(this.pubId); //取消订阅
  },
};
</script>

<style>
.scl {
  background-color: #bfd;
  padding: 5px;
}
</style>

4.提供数据：pubsub.publish(‘xxx’,数据)

//定义一个Student组件用于提供数据
<template>
  <div class="stu">
    <h2>学生姓名：{{ studentName }}</h2>
    <h3>学生年龄：{{ age }}</h3>
    <button @click="sendStudentName">studen学生姓名给School</button>
  </div>
</template>

<script>
// 给发送数据方也要引入相关组件
import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      studentName: "小王八",
      age: 19,
    };
  },

  methods: {
    sendStudentName() {
      pubsub.publish("hello", 666);
    },
  },
};
</script>

<style scoped>
.stu {
  background-color: #bfa;
  padding: 5px;
}
</style>

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

6.其实消息订阅的作用和全局总线一样，其实用全局总线更好

7.几个注意点：

• 接收和发送数据方都要引入第三方库
• 因为消息订阅与发布时调用第三方库，所以试调的时候是看不到报错和提示的。