vue进阶-消息的订阅与发布

news2025/1/10 3:10:48

📖vue基础学习-组件介绍了嵌套组件间父子组件通过 props 属性进行传参。子组件传递数据给父组件通过 $emit() 返回自定义事件，父组件调用自定义事件接收子组件返回参数。

📖vue进阶-vue-route 介绍了路由组件传参，两种方式：params传参 和 query 传参。

本章介绍组件间通信：✨vue消息的订阅与发布✨

简介

消息的订阅与发布（PubSub.js）适用于：任何组件间通信。
PubSub 可以在 Vue 任意组件间进行传值，无需要进行中间层层传递。
使用的模式是观察者模式：生产者抛出，消费者接收。

1. 入门

1.1 安装

npm i pubsub-js

1.2 引入 pubub

import pubsub from 'pubsub-js'

1.3 发布

pubsub.publish('消息名称', 发布的数据)

1.4 订阅

pubsub.subscribe('消息名称', 回调函数)

subscribe()方法会返回订阅消息对应的 ID。
回调函数接收两个参数，第一个参数为消息名称，第二个参数为传递过来的数据。
回调函数，不建议使用普通匿名函数，因为第三方库和 vue 不一样，不保证函数中的 this 指向 vue 实例或组件实例对象。建议使用箭头函数或者将普通函数写在 methods 配置项中。

第一种方式：

mounted() {
	this.pid = pubsub.subscribe('xxx', (msgName, data)=>{...})
}

第二种方式：

methods: {
	demo(msgName, data){...}
},
mounted() {
	this.pid = pubsub.subscribe('xxx', this.demo)
}

1.5 取消订阅

beforeDestroy() {
    pubsub.unsubscribe(this.pid)
}

beforeDestroy 钩子函数中，调用pubsub.unsubscribe取消订阅。

2. 示例

首先，我们先复习下嵌套组件间父子组件传值。

📌1、新增子组件 ComponentA

<template>
    This is ComponentA, title = {{title}}, userName = {{userName}}
</template>
<script>
export default {
    props: ['title','userName']
}
</script>

子组件通过 props: ['title','userName'] 显式声明它所接受的属性 title、userName。

📌2、新增父组件 FuComponent

<template>
    <component-a :title="title" :userName="userName"></component-a>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue'

export default {
    components: { ComponentA },
    data() {
        return {
            title: 'google',
            userName: 'Jack'
        }
    }
}
</script>

父组件在 data 中动态赋值 title、userName 。

📌3、router/index.js配置路由

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: '/fuComponent',
        component: () => import("@/components/FuComponent.vue")
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

📌4、App.vue 中使用路由

<template>
  <router-link to="/fuComponent">父子组件参数传递</router-link><br />
  <hr />
  <router-view></router-view>
</template>
<script setup>
 
</script>

📌5、测试

在这里插入图片描述

3. 发布订阅模式改造

📌1、子组件 ComponentA 发布订阅

在这里插入图片描述

<template>
    This is ComponentA, title = {{title}}, userName = {{userName}}
</template>

<script>
import pubsub from "pubsub-js";

export default {
    data() {
        return {
            title: '',
            userName: ''
        }
    },
    mounted() {
        this.pid = pubsub.subscribe('test', (msgName, data )=> {
            console.log('有人发布了 test , test 消息的回调执行了', msgName, data);
            this.title = data.title;
            this.userName = data.userName;
        })
    },
    beforeDestroy() {
        pubsub.unsubscribe(this.pid)
    }
}
</script>

📌2、新增父组件 FuComponent

在这里插入图片描述

<template>
  <component-a></component-a>
  <br />
  <button @click="send">点击发布消息</button>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue'
import pubsub from "pubsub-js";

export default {
    components: { ComponentA },
    methods: {
        send() {
            let sendData = {
                title: "google",
                userName: "Jack"
            };
            pubsub.publish("test", sendData);
        }
    }
};
</script>