【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

<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){

})

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

🚀取消订阅

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

 🚲效果图