Vue2 消息订阅与发布

1.pubsub-js 第三方库实现

实现任何框架的消息订阅发布

npm i pubsub-js

<template>
  <div class="student">
    <h2>展示学生的名称:{
  
  { name }}</h2>
    <h2>展示学生的性别:{
  
  { sex }}</h2>
  </div>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "MyStudentt",
  data() {
    //这里存放数据
    return {
      name: "我是一个人",
      sex: 12,
    };
  },
  mounted() {
    // console.log(this.$refs.school1.__proto__===this.$refs.school2.__proto__);//true
    //   this.$bus.$on("show", (data)=>{
    //     console.log('事件总线收到了数据',data); 两个都生效
    //     this.name = data;
    //   });
    //  this.$bus.$on("show", (data)=>{
    //     console.log('事件总线收到了数据1',data);
    //     this.sex = data;
    //   });
    //订阅一个消息 show 是一个主题
   const pubId =  pubsub.subscribe("show", (msg, data) => {
      //消费者
      console.log("有人发布了消息，show消息回调成功", data);
      this.name = data;
    });

   this.pubId = pubId;
    //   pubsub.subscribe('show',(msg,data)=>{//消费者
    //   console.log('有人发布了消息，show消息回调成功',data);
    //   this.sex = data;
    // })
  },
  beforeDestroy() {
    // this.$bus.$off("show");

    pubsub.unsubscribe(this.pubId);