Vue 消息订阅与发布

使用

1、首先安装 pubsubjs,执行 npm i pubsub-js
pubsubjs 一个利用 JavaScript 进行发布/订阅的库
pubsubjs 一种组件间通信的方式,适用于任意组件间通信

2、由于是 School 需要接收订阅消息,所以在 School 中先引入 pubsubjs,然后订阅和取消订阅消息

<template>
  <!--组件的结构-->
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <span>传过来的消息:{{ msg }}</span>
  </div>
</template>

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

//组件交互相关的代码(数据、方法等)
export default {
  name: "SchoolD",
  data() {
    return {
      name: "北京大学",
      address: "北京",
      msg: "",
    };
  },
  mounted() {
    this.pubid = pubsub.subscribe("hello", (msgName, data) => {
      this.msg = data;
      console.log(
        "有人发布了hello消息," + msgName + "回调执行了,收到数据:" + data
      );
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubid);
  },
  methods: {
    // hello(msgName, data) {
    //   //两个参数 第一个是方法名 第二个是传过来的数据
    //   this.msg = data;
    //   console.log(
    //     "有人发布了hello消息," + msgName + "回调执行了,收到数据:" + data
    //   );
    // },
  },
};
</script>

需要注意,订阅消息时,回调函数写成箭头函数,或者放到 methods 中,否则方法中的 this 是 undefined
3、Student 中引入 pubsubjs,并发布消息

<template>
  <!--组件的结构-->
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生年龄:{{ age }}</h2>
    <button ="sendStudentName">School组件发送学生姓名</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
//组件交互相关的代码(数据、方法等)
export default {
  name: "StudentD",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    sendStudentName() {
      pubsub.publish("hello", 666);
    },
  },
};
</script>

Vue 消息订阅与发布_第1张图片

总结

消息订阅与发布(pubsub)
1.一种组件间通信的方式,适用于任意组件间通信
2.使用步骤:
①安装pubsub: npm i pubsub-js
②引入:import pubsub from ‘pubsub-js’
3.接收数据:
A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身

methods(){
	demo(data){......}
}
......
mounted() {
    this.pubid = pubsub.subscribe("xxx", this.demo)
  }

4.提供数据:pubsub.publish( "xxx” ,数据)
5.最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅

你可能感兴趣的:(vue.js,javascript,前端)