Vue发布订阅消息

原创

已于 2022-04-07 14:36:46 修改 · 848 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-07 14:22:28 首次发布

本文介绍如何在Vue项目中利用pubsub-js库进行消息发布订阅。通过安装库，订阅特定主题如'hello'，并在组件中发布消息，达到组件间通信的效果。

本案例我们使用pubsub-js第三方库实现消息的发布订阅。

1、安装pubsub-js

npm i pubsub-js

2、订阅hello主题的消息

SchoolCom.vue

<template>
    <div class="demo">
        <h1>学校名字:{
  
  {name}}</h1>
        <h1>学校地址:{
  
  {address}}</h1>
        <h1>收到的学生名字:{
  
  {studentName}}</h1>
    </div>
</template>

import pubsub from "pubsub-js"

export default {
    name: "SchoolCom",
    data: function(){
        return {
            name: "深圳大学",
            address: "深圳",
            studentName: ""
        }
    },
    mounted(){
        //订阅hello主题消息
        this.pubId = pubsub.subscribe("hello", (msgTopicName, data)=>{
            console.log("我是SchoolCom组件收到学生名字：", data);
            this.studentName = data;
        });
    },
    beforeDestroy(){
        pubsub.unsubscribe(this.pubId); //取