消息订阅与发布pubsub

2023-10-22 16:15
文章标签 发布 订阅 消息 pubsub

本文主要是介绍消息订阅与发布pubsub,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

消息订阅与发布

  1. 订阅消息:消息名
  2. 发布消息:消息内容

在这里插入图片描述

A组件想使用C组件里面的东西,A需要数据,C是提供者。

在A组件里面订阅一个消息,假设订阅的消息名叫做Demo,指定回调函数叫test;C发布消息,消息名也必须是Demo,数据是666。A订阅消息test函数触发调用,666就会传到test函数。

任何一个框架里面都可以使用pubsub–js进行消息的订阅与发布。

安装pubsub库

npm i pubsub-js@1.6.0

引用库

import pubsub from 'pubsub-js'

pubsub是个对象,含有很多有用的方法.School组件挂载完毕马上订阅消息

    mounted() {pubsub.subscribe('hello',function name(params) {console.log('有人发布了hello消息,hello消息的回调执行了');})}

以上是School组件订阅消息,下面是Student组件发布消息

    mounted() {this.pubId= pubsub.subscribe('hello', (msgName,data) =>{console.log('有人发布了hello消息,hello消息的回调执行了', msgName, data);})},beforeDestroy() {pubsub.unsubscribe(this.pubId)}

总结

  1. 一种组件间通信的方式,适用于任意组件间通信。
  2. 使用步骤:
    1. 安装pubsub:npm i pubsub-js
    2. 引入:import pubsub from ‘pubsub-js’
    3. 接收数据:A组件想要接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
    methods(){demo(data){}
    },
    ......
    mounted(){this.pid=pubsub.subscribe('xxx',this.demo)
    }
    1. 提供数据 pubsub.publish(‘xxx’,数据)
    2. 最好在beforeDestory钩子中,用 pubsub.unsubscribe(pId)取消订阅

TodoList的消息订阅与发布实践

App组件需要数据,删除id
MyItem提供数据,发布消息

App消息订阅

App引入库,然后订阅消息deleteTodo

 deleteTodo(_,id) {this.todos = this.todos.filter((todo) => {return todo.id!==id})},,

第一个参数是消息名,但是消息名会显示为灰色因为定义了没有使用,所以更好的是使用_占位符,这样才可以保证收到的是正常的参数。
订阅消息之后再销毁之前再取消订阅

  mounted() {this.$bus.$on('checkTodo', this.checkTodo)// this.$bus.$on('deleteTodo', this.deleteTodo)this.pubId= pubsub.subscribe('deleteTodo',this.deleteTodo)},beforeDestroy() {this.$bus.$off('checkTodo')// this.$bus.$off('deleteTodo')pubsub.subscribe( this.pubId)}

MyItem消息发布

   handleDelete(id) {if (confirm('确定删除吗?')) {pubsub.publish('deleteTodo',id)}}if (confirm('确定删除吗?')) {pubsub.publish('deleteTodo',id)}}

这篇关于消息订阅与发布pubsub的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/262445

相关文章

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

SpringCloud整合MQ实现消息总线服务方式

《SpringCloud整合MQ实现消息总线服务方式》:本文主要介绍SpringCloud整合MQ实现消息总线服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、背景介绍二、方案实践三、升级版总结一、背景介绍每当修改配置文件内容,如果需要客户端也同步更新,

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增

Maven 依赖发布与仓库治理的过程解析

《Maven依赖发布与仓库治理的过程解析》:本文主要介绍Maven依赖发布与仓库治理的过程解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录Maven 依赖发布与仓库治理引言第一章:distributionManagement配置的工程化实践1

一文带你搞懂Redis Stream的6种消息处理模式

《一文带你搞懂RedisStream的6种消息处理模式》Redis5.0版本引入的Stream数据类型,为Redis生态带来了强大而灵活的消息队列功能,本文将为大家详细介绍RedisStream的6... 目录1. 简单消费模式(Simple Consumption)基本概念核心命令实现示例使用场景优缺点2

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析