消息的订阅与发布机制

news/2024/7/10 2:05:24 标签: vue, 前端框架, 前端, javascript

消息的订阅与发布机制

在这里插入图片描述

  • 功能:可完成任意组件之间数据的传递(同全局事件总线功能一样)
  • 区别:与全局事件总线相比,消息的订阅和发布机制需要使用第三方库。我用的是pubsub-js库,其他的第三方库也可以使用,没有具体的限制。
  • pubsub-js可以在任何前端框架>前端框架上使用
  • 在这个库中,有两个属性可以帮助完成消息的订阅和发布机制,分别是:subscribe(订阅)和publish(发布)

pubsub-js第三方库的安装与使用

  • 安装方法
    • 第一步:打开CMD窗口,将现在的文件路径转成Vue框架安装的文件路径
    • 第二步:在窗口中输入:npm i pubsub-js,回车即可开始安装,出现added 1 package in 2m代表安装完成
  • 在程序中引入pubsub-js:就跟引入组件一样,在<script></script>中添加import pubsub from 'pubsub-js'

如何使用?

javascript"><template>
    <div></div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name : 'App',
        mounted(){
            this.pid = pubsub.subscribe('zhangsan', function(name, sex){
                console.log(name);
                console.log(sex);
            })
        },
        // 销毁前将订阅解除
        beforeDestroy(){
            pubsub.unsubscribe(this.pid)
        }
    }
</script>
javascript"><template>
    <div>
        <button @click="person">张三</button>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name : 'User',
        methods : {
            person(){
                pubsub.publish('zhangsan', '男')
            }
        }
    }
</script>

http://www.niftyadmin.cn/n/5139956.html

相关文章

StarkNet的Cairo知识简介

StarkNet 是一个构建在以太坊区块链上的二层扩展解决方案&#xff0c;它的目的是提供高效、可扩展的智能合约平台。它使用零知识证明技术&#xff08;Zero-Knowledge Proofs&#xff09;来实现私密性和可伸缩性。在 StarkNet 上&#xff0c;Cairo 是一种类似于 Solidity&#x…

C语言--输出格式控制(printf函数)--宽度精度控制

格式输出函数printf printf(格式控制&#xff0c;输出表列) 基本用法 格式字符功能例子d输出一个有符号的十进制整数printf("%d %d",12,-56);c输出一个字符 char ch a; printf("%c",ch); s输出一个字符串printf("%s","oh my god&…

财务数字化转型的切入点是什么?_光点科技

随着科技的不断进步&#xff0c;数字化转型已经成为各个行业追求的目标&#xff0c;财务领域也不例外。那么&#xff0c;财务数字化转型的切入点在哪里呢&#xff1f;如何确保转型的成功进行&#xff1f; 数据整合与管理 财务数据的准确性与及时性是财务管理的基石。数字化转型…

黑马 小兔鲜儿 uniapp 小程序开发- 微信登录用户模块- 06-07

黑马 小兔鲜儿 uniapp 小程序开发- 商品详情模块- day05-CSDN博客 小兔鲜儿 - 微信登录-06 涉及知识点&#xff1a;微信授权登录&#xff0c;文件上传&#xff0c;Store 状态管理等。 微信登录 微信小程序的开放能力&#xff0c;允许开发者获取微信用户的基本信息&#xff…

【备忘录】SpringBoot+ dynamic-datasource配置自定义多数据源

一、 业务场景解释 由于公司业务需要开发设计一款文件读取导入工具&#xff0c;导入的配置和目标数据库并不一定在同一个数据库地址&#xff0c;故需要使用到自定义数据源&#xff0c;并且支持数据源切换 大致场景如下&#xff1a; 二、工具选择 鉴于市面上有很多工具&#…

前端项目部署后,需要刷新页面才能看到更新内容

问题背景 前端项目部署更新后&#xff0c;通知业务验证&#xff0c;业务点击收藏的标签&#xff0c;打开网页后没有看到修改的内容&#xff0c;每次都需要手动刷新&#xff0c;用户体验非常不好。 问题原因&#xff1a;缓存未过期&#xff0c;浏览器直接读取本地缓存&#xf…

【C++】set和multiset

文章目录 关联式容器键值对一、set介绍二、set的使用multiset 关联式容器 STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元…

antd renderFormItem AutoComplete结合防抖导致防抖失效的解决办法

业务背景 我们有一个需求是在用户输入用例名称的时候&#xff0c;系统根据名称去匹配公共用例库中的用例模块展示在下拉框中&#xff0c;然后用户可选择想要的模块导入其中的用例&#xff1a; 但是如果用户每输入一个字符就去调用接口查询的话&#xff0c;这样就太频繁了&…