[vue3] 消息的订阅与发布

沫洺

已于 2022-11-19 21:40:40 修改

阅读量1.9k

点赞数

分类专栏： Vue3 文章标签：前端

于 2022-09-16 08:59:45 首次发布

本文链接：https://blog.csdn.net/HeyVIrBbox/article/details/126880215

版权

Vue3 专栏收录该内容

19 篇文章 23 订阅

订阅专栏

本文介绍了如何使用PubSub.js在Vue组件间进行通信，包括安装、发布消息、订阅消息以及取消订阅的步骤。通过创建子组件和父组件的实例，演示了子组件如何向父组件发送数据，以及父组件如何接收和显示这些数据。

摘要由CSDN通过智能技术生成

✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏

📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🛴消息的订阅与发布

🛵组件间通信：消息的订阅与发布（PubSub.js）组件间的一种通信方式，适用于任何组件间通信。

🛵使用PubSub可以在Vue任意组件间vue进行传值，无需要进行中间层层传递。

🛵使用的模式是观察者模式,生产者抛出,消费者接收

🚲安装

🛵npm install --save pubsub-js

🚀注意在导包时可能因为版本问题出现红色波浪线, 不用管正常运行即可

🚀原因:

使用 npm install pubsub-js --save 命令下载的是1.7.0的最新版本，不支持
使用 npm install pubsub-js@1.6.0 --save 命令下载的是1.6.0的版本。
1.6.0版本支持发布(publish)和订阅(subscribe)函数

🚲消息的发布

🚀模拟子组件向父组件发送消息,子组件作为生产者生产data

语法：PubSub.publish('主题', data)

新建views/poduct/Add.vue

添加路由

🚀Add.vue

<template>
    <input v-model="name" placeholder="请输入商品名称" /><br><br>
    <el-button type="primary" @click="addProduct">新增商品</el-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 首先在此导入PubSub
import PubSub from 'pubsub-js'

const name = ref('')

const addProduct = () => {
    // 生产者
    //PubSub.publish('主题', data)
    PubSub.publish('主题1', name.value)
}
</script>

🚲消息订阅

🚀父组件作为消费者接收data

语法：PubSub.subscribe('主题', function(msg, data){

})

<template>
    <fieldset>
        <legend>商品父页</legend>
        <router-view></router-view>
    </fieldset>
    <fieldset>
        <legend>添加商品</legend>
        商品名称:{{productName}}
    </fieldset>
   
</template>
<script setup lang="ts">
import { ref,onMounted  } from "vue";
import PubSub from 'pubsub-js'
const productName = ref('')
onMounted(()=>{
     //消费者
     //订阅消息
     //PubSub.subscribe('主题', function(msg, data){})
     PubSub.subscribe('主题1', (topic: string, data: any) => {
        console.log(topic, data);
        productName.value=data;
    })
})
</script>

🚀取消订阅

<template>
    <fieldset>
        <legend>商品父页</legend>
        <router-view></router-view>
    </fieldset>
    <fieldset>
        <legend>添加商品</legend>
        商品名称:{{productName}}
    </fieldset>
   
</template>
<script setup lang="ts">
import { ref,onMounted ,onUnmounted } from "vue";
import PubSub from 'pubsub-js'
const productName = ref('')
onMounted(()=>{
     //消费者
     //订阅消息
     //PubSub.subscribe('主题', function(msg, data){})
     PubSub.subscribe('主题1', (topic: string, data: any) => {
        console.log(topic, data);
        productName.value=data;
    })
})
onUnmounted(() => {
    // 取消订阅
    console.log("取消订阅")
    PubSub.unsubscribe(pubId);
})
</script>