VUE3.0,DAY53，消息订阅与发布

消息订阅与发布原理

我们通过报纸的订阅与发布来示例运行原理。

那么我们消息的订阅与发布如下：

假设vue的组件中有以下关系，c有一个消息，A想要使用，就得在A组件订阅一个消息名。如demo，然后如果有人发布了消息，就调用test回调函数，这属于订阅部分。在c中发布一个消息名demo，然后里边携带着数据，这属于发布部分。

需要安装库

原生的js没有这样的库，所以我们需要安装第三方库来实现该功能，比如pubsub-js。在vs code终端里输入如下代码

然后在school中引入这个库，school.vue组件是收数据的。同样的发布消息的student.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() {
    //订阅一个消息，消息名是hello，并且定义一个回调函数
    pubsub.subscribe('hello',function(){
      console.log('有人发布了hello消息，hello消息的回调被执行了');
    })
  },
};
</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);
  },
  methods: {
    sendStudentName() {
      //发布一个名为hello的消息，数据内容为666
      pubsub.publish("hello", 666);
    },
  },
};
</script>

<style  scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>

输出效果如下：

上边我们验证了各个函数能否正常运行，下边验证如何传递真正的数据，我们在回调函数function里设置两个参数a和b，b是传递真正的数据，a是传递消息名。修改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() {
    //订阅一个消息，消息名是hello，并且定义一个回调函数
    pubsub.subscribe("hello", function (a, b) {
      console.log("有人发布了hello消息，hello消息的回调被执行了", a, b);
    });
  },
};
</script>

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

实际输出效果如下：

总结