[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>

 🚲效果图