[vue3] 消息的订阅与发布

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

📚📚系列专栏: 📖 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>

 🚲效果图

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沫洺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值