发布订阅模式（事件总线） 任意组件同信vue2

原创 已于 2023-07-12 19:36:41 修改 · 128 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2023-07-12 10:51:18 首次发布
博客介绍了JavaScript实现事件总线的方法，共分三步：创建事件总线、触发自定义事件并传参、监听事件。通过这三步可完成事件总线的搭建，实现事件的传递与监听。

 总共就三步

1创建一个事件总线

2触发自定义事件的同时并传参

3监听事件

 

工大同信OA产品介绍.docx
05-26
### 工大同信OA产品介绍 #### 一、指导原则概述 工大同信的办公自动化(OA)系统在设计之初便确立了一系列明确的指导原则，这些原则旨在确保系统能够满足用户的需求，并具备良好的用户体验。 **先进性**：整个系统...
Vue2、Vue3的组件通信方式
weixin_45946310的博客
06-30 1277
本文主要介绍Vue2和Vue3几种常用的组件通信方式以及具体使用案例
Vue 2 和 Vue 3 组件通信详解
qq_67572731的博客
09-03 2593
【代码】Vue 2 和 Vue 3 组件通信详解。
Vue3-实现父子组件通信
一位想要成为优秀全栈工程师的有志青年！
11-03 1278
本文介绍Vue3、ts父子组件通信，使用defineProps()，defineEmits()完成通信效果。
vue3父子同信的双向数据实现3种方式
weixin_47389477的博客
08-08 349
我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢？
uni-app父子组件通信最佳实践 - 基于Vue3 Setup语法
weixin_67093879的博客
06-23 454
本文介绍了在uni-app中使用Vue3 Setup语法实现父子组件通信的方法。主要内容包括：通过defineProps接收父组件传递的数据（Props），使用defineEmits定义子组件触发的事件（Emit），并提供了代码示例展示数据传递和事件触发的具体实现。文章还总结了最佳实践，如命名规范、类型检查和单向数据流原则，并提及了动态Props和Props验证等进阶技巧，帮助开发者规范高效地实现组件间通信。
vue父子传值、调用子组件方法
Turn_to_empty的博客
04-21 484
vue传值 父组件可以使用props把数据传给子组件 子组件可以使用$emit，让父组件监听到自定义事件 <!-- 父组件 --> <template> <div> <!-- v-on:test="..."（缩写为@test） 子组件方法 = 父组件方法 --> <argument ref="argument" :argumentId='..绑定的值..' :content='..绑定的值.
vue3中使用$attrs实现组件通信
weixin_45998693的博客
10-27 436
vue3中使用$attrs实现组件同信
Vue 父子组件之间的通信传参
老程的博客
08-13 400
1、props : 父组件 向 子组件 传参 Parent.vue** <template> <div> parent：下面是我的子组件 <childSon :userName='name'></childSon> </div> </template> <script> import childSon from './Childs' export default { name:'Parent',
Vue---兄弟组件通信（三种方式）
像梦巧清的博客
08-10 2854
第一种：eventBus     新建一个js文件， 我这里叫做 bus.js,     文件内容：           import Vue from 'vue';            export default new Vue();    然后在你需要触发的 组件中引入   import   bus  from  '文件路径'          执行：bus.$emit('触发名...
让mspm0与总线舵机进行串口同信
08-02
- 设置 UART 工作模式为异步模式 - 配置波特率、数据位、停止位和校验方式 - 使能 UART 发送和接收功能 以下是一个 UART 初始化示例代码： ```c #include "msp_m0g3507.h" void UART_Init(void) { // 使能 UART0...
基于PaddleX+Flask开发后端，基于VUE开发前端应用，做一个AI医疗的WEB应用.zip
04-03
在这个项目中，我们将探讨如何利用PaddleX和Flask构建后端，以及如何结合Vue.js开发前端，以创建一个AI医疗的Web应用。这个应用旨在利用人工智能技术为医疗健康领域提供服务，例如辅助诊断、患者数据管理等。下面将...
Vue开发工具使用技巧
2509_93946471的博客
11-24 283
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 899
在。
SSM企业物资管理系统h3109(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面
2509_93102542的博客
11-21 766
在技术实现上，国外多采用成熟的开发框架和技术架构，注重系统的安全性、稳定性和可扩展性，同时积极融入大数据、人工智能等新技术，实现物资需求预测、智能库存优化等功能。基于此，开发一套基于SSM框架的企业物资管理系统，整合部门、员工、物资及各类业务流程管理功能，实现物资管理的数字化、规范化和高效化，成为解决企业物资管理痛点的必然需求。本课题旨在开发一套基于SSM框架的企业物资管理系统，围绕部门、员工、物资信息、物资申请、消息提醒、物资归还、物资入库、意见反馈八大核心功能模块，实现企业物资管理的全流程数字化。
Vue3的生命周期
分享学习网络的点点滴滴
11-21 137
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
Vue网站
最新发布
2509_93947362的博客
11-24 177
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
React社区
2509_93942966的博客
11-23 281
这种混乱中带着生命力的讨论，特别像早年中关村攒机市场——商家喊着不同配置的优劣，而真正懂行的玩家早就摸清了哪个方案最适合自己的项目。但有意思的是，无论工具链怎么变，React核心团队始终稳如老狗——他们宁可把并发特性在实验阶段晾三年，也不愿重蹈Angular断代升级的覆辙。组件库生态更是百花齐放。这种带着口音的技术交流，反而比标准教科书更能体现社区的活力。或许某天你写在Stack Overflow的答案，就会成为某个巴西程序员解决线上故障的关键——这种跨越时区的知识接力，才是技术社区最浪漫的部分。
Vue3 中 ECharts Tooltip 无法显示？问题根源与解决方案
weixin_41940856的博客
11-21 482
Vue3 中 ECharts Tooltip 无法显示的核心问题是使用ref深度代理 ECharts 实例，导致其内部事件机制失效。通过将ref替换为shallowRef，既能保持实例的响应式引用，又不会破坏其内部结构，是最简单高效的解决方案。在 Vue3 中集成第三方库时，需注意响应式 API 的选择：复杂实例用shallowRef，普通数据对象用refreactive，避免因响应式代理引发的隐性问题。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值