【[特殊字符] Vue 3 实现动态加载子组件并缓存状态完整指南】
文章目录
- 🧩 Vue 3 实现动态加载子组件并缓存状态完整指南
- 💡 需求背景
- 🎯 最终实现效果
- 效果图
- 🛠️ 技术栈
- 🧱 文件结构示例
- 🔧 实现流程详解
- 1. 定义组件映射关系
- 2. 子组件定义并暴露方法
- 3. 父组件逻辑处理
- ✅ 使用 `<keep-alive>` 缓存组件
- ✅ 组件加载和卸载控制
- ✅ 加载组件并设置参数
- ✅ 调用所有子组件的 `save()` 方法
- 🧪 示例截图(文字模拟)
- 📌 关键知识点总结
- 🧩 可选扩展建议
- 📝 结语
🧩 Vue 3 实现动态加载子组件并缓存状态完整指南
💡 需求背景
在开发大型管理系统或低代码平台时,常常会遇到如下需求:
- 页面左侧是一个树形结构菜单(如组织架构、模块配置等)
- 用户点击某个节点后,在右侧内容区域加载一个对应的子组件
- 每个子组件名称不同,功能也不同
- 子组件需要接收参数(如订单号
orderId
) - 父组件需要调用子组件的统一方法(如
save(orderId)
) - 支持多选节点,每个选中的节点都加载一个子组件到内容区
- 已加载的子组件需要缓存状态(如表单输入、请求数据),避免重复加载
🎯 最终实现效果
- 树形菜单支持多选
- 每个选中节点对应一个子组件,展示在内容区域
- 子组件可接收参数(如
orderId
) - 父组件可通过
ref
调用子组件的方法(如save()
) - 所有已加载的子组件都会被缓存,切换时不丢失状态
- 可以一键保存所有子组件的数据
效果图
🛠️ 技术栈
- Vue 3(Composition API)
<component is>
:动态渲染组件defineAsyncComponent
:按需异步加载组件<KeepAlive>
:缓存组件状态defineExpose
:暴露子组件方法供父组件调用ref
数组:管理多个子组件实例引用
🧱 文件结构示例
src/
├── components/
│ ├── PageA.vue
│ ├── PageB.vue
│ └── PageC.vue
├── views/
│ └── HomeView.vue
├── utils/
│ └── componentMap.js
└── App.vue
🔧 实现流程详解
1. 定义组件映射关系
// componentMap.js
export const componentMap = {'node1': 'PageA','node2': 'PageB','node3': 'PageC'
}
2. 子组件定义并暴露方法
<!-- PageA.vue -->
<script setup>
import { defineProps } from 'vue'const props = defineProps({orderId: String
})const save = (orderId) => {console.log('保存订单号:', orderId)
}defineExpose({ save })
</script><template><div>当前订单号:{{ orderId }}</div>
</template>
其他组件类似。
3. 父组件逻辑处理
✅ 使用 <keep-alive>
缓存组件
<keep-alive><component:is="item.component":ref="(el) => setComponentRef(el, index)":order-id="item.orderId"/>
</keep-alive>
✅ 组件加载和卸载控制
function toggleSelection(node) {const index = selectedNodes.value.findIndex(n => n.id === node.id)if (index === -1) {selectedNodes.value.push(node)loadComponent(node)} else {selectedNodes.value.splice(index, 1)removeComponent(node)}
}
✅ 加载组件并设置参数
function loadComponent(node) {const componentName = componentMap[node.id]if (components[componentName]) {loadedComponents.value.push({id: node.id,label: node.label,component: defineAsyncComponent(components[componentName]),orderId: `ORDER_${node.id.toUpperCase()}`})}
}
✅ 调用所有子组件的 save()
方法
async function saveAll() {for (let i = 0; i < componentRefs.value.length; i++) {const comp = componentRefs.value[i]if (comp && comp.save) {await comp.save(loadedComponents.value[i].orderId)}}
}
🧪 示例截图(文字模拟)
区域 | 内容 |
---|---|
左侧树 | 多个节点,支持点击选择 |
右侧内容 | 每个选中节点对应一个子组件,显示订单号 |
底部按钮 | “保存全部”按钮,调用所有子组件的 save() |
📌 关键知识点总结
功能 | 实现方式 |
---|---|
动态加载组件 | 使用 <component is="xxx"> |
异步加载 | 使用 defineAsyncComponent() |
传递参数 | 使用 props |
获取组件实例 | 使用 ref 和 setComponentRef() |
调用子组件方法 | 使用 ref.value.save() |
缓存组件状态 | 使用 <KeepAlive> |
生命周期钩子 | onActivated() / onDeactivated() |
🧩 可选扩展建议
- 添加 Tab 切换面板,使用
v-show
控制显隐 - 使用 Pinia/Vuex 管理组件状态
- 使用 TypeScript 定义接口规范
- 添加“关闭”按钮移除某个缓存组件
- 支持最大缓存数量限制(自定义 KeepAlive 插件)
📝 结语
通过 Vue 3 提供的强大特性,我们可以轻松实现复杂的动态组件加载、状态缓存和跨层级通信。本文提供了一套完整的解决方案,适用于企业级后台系统、低代码编辑器、配置中心等场景。
如果你正在构建一个多标签页、模块化管理系统的项目,这套方案将非常实用!
相关文章:
【[特殊字符] Vue 3 实现动态加载子组件并缓存状态完整指南】
文章目录 🧩 Vue 3 实现动态加载子组件并缓存状态完整指南💡 需求背景🎯 最终实现效果效果图 🛠️ 技术栈🧱 文件结构示例🔧 实现流程详解1. 定义组件映射关系2. 子组件定义并暴露方法3. 父组件逻辑处理✅ …...
从零开始的抽奖系统创作(2)
我们接着进行抽奖系统的完善。 前面我们完成了 1.结构初始化(统一结果返回之类的,还有包的分类) 2.加密(基于Hutool进行的对称与非对称加密) 3.用户注册 接下来我们先完善一下结构(统一异常处理&#…...
【计算机方向海外优质会议推荐】第二届图像处理、机器学习与模式识别国际学术会议(IPMLP 2025)
重要信息 大会官网:www.ipmlp.net 会议主页【点击参会/投稿/了解会议详情】:第二届图像处理、机器学习与模式识别国际学术会议(IPMLP 2025)_艾思科蓝_学术一站式服务平台 截稿时间:详见官网 接受/拒稿通知:投稿后1…...
进程之IPC通信二
4.共享内存 共享内存是进程间通信一种方式,多个进程共享一段内存,“ 共享内存 ”。由于多个进程共享了同一段内 存,这个段内存既是你的也是我的。也就是你往这个内存里面写入数据,实际上就相当于往我的内存里 面写入数据。比起其…...
打造高效数据处理利器:用Python实现Excel文件智能合并工具
有时候,我们需要将多个Excel文件按照特定顺序合并成一个文件,这样可以更方便地进行后续的数据处理和分析。今天,我想分享一个使用Python开发的小工具,它可以帮助我们轻松实现Excel文件的智能合并。C:\pythoncode\new\xlsx_merger.…...
使用注解动态映射:根据实体List列表动态生成Excel文件
我们一般通过POI来生成对应的Excel文件,绝大多数情况是需要手动编写单元格内容,然后顺序填充值,今天我们将动态根据实体来生成Excel表头,同时自动填充内容。 文章目录 1. 定义注解2. 实体类应用注解3. 动态导出工具类 1. 定义注解…...
【ISP算法精粹】什么是global tone mapping和local tone mapping?
1. 简介 全局色调映射(Global Tone Mapping)和局部色调映射(Local Tone Mapping)是高动态范围(HDR)图像处理中的两种关键技术,用于将高动态范围图像的亮度值映射到标准动态范围(LDR…...
uniapp生成的app,关于跟其他设备通信的支持和限制
以下内容通过AI生成,这里做一下记录。 蓝牙 移动应用(App)通过蓝牙与其他设备通信,是通过分层协作实现的。 一、通信架构分层 应用层(App) 调用操作系统提供的蓝牙API(如Android的BluetoothA…...
C++ Pimpl(Pointer to Implementation)设计思想
一、C Pimpl(Pointer to Implementation)设计思想 1. 核心思想 Pimpl(Pointer to Implementation)是一种通过将类的实现细节隐藏在一个私有指针背后的设计模式,旨在实现接口与实现的解耦。其核心思想是: …...
便捷的Office批量转PDF工具
软件介绍 本文介绍的软件是一款能实现Office批量转换的工具,名为五五Excel word批量转PDF。 软件小巧 这款五五Excel word批量转PDF软件大小不到2M。 操作步骤一 使用该软件时,只需把软件和需要转换的Word或Excel文件放在同一个文件夹里。 操作步骤…...
2025年渗透测试面试题总结-华顺信安[实习]安全服务工程师(题目+回答)
网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 华顺信安[实习]安全服务工程师 1. 自我介绍 2. 红蓝队经验 3. Shiro漏洞知识体系 4. APP渗透测试方法…...
Mermaid 使用快速入门
使用AI 生成Mermaid 代码,导入Vscode, 安装Mermaid Preview 插件 --- title: config:theme: forest --- graph TDA[开始] --> B{条件判断}B -->|是| C[执行操作1]B -->|否| D[执行操作2] theme可改变主题,可选主题: default - 这是…...
Windows系统下MySQL 8.4.5压缩包安装详细教程
一、MySQL 8.4.5新特性概览 相较于旧版本,MySQL 8.4.5在性能与功能上实现了显著提升: 性能优化:官方测试显示,在高并发场景下,其读写性能较5.7版本提升近2倍,尤其在处理热点数据竞争问题时表现更为出色。…...
机器学习10-随机森林
随机森林学习笔记 一、随机森林简介 随机森林(Random Forest)是一种集成学习算法,基于决策树构建模型。它通过组合多个决策树的结果来提高模型的准确性和稳定性。随机森林的核心思想是利用“集成”的方式,将多个弱学习器组合成一…...
【缺陷】GaN和AlN中的掺杂特性
1997 年 5 月 9 日,北卡罗来纳州立大学的 P. Bogusławski 和 J. Bernholc 等人在《Physical Review B》期刊发表了题为《Doping properties of C, Si, and Ge impurities in GaN and AlN》的文章,基于量子分子动力学方法,研究了碳(C)、硅(Si)和锗(Ge)杂质在氮化镓(G…...
游戏引擎学习第298天:改进排序键 - 第1部分
关于向玩家展示多个房间层所需的两种 Z 值 我们在前一天基本完成了为渲染系统引入分层 Z 值的工作,但还没有完全完成所有细节。我们开始引入图形渲染中的分层概念,即在 Z 轴方向上拥有多个独立图层,每个图层内部再使用一个单独的 Z 值来实现…...
AI大模型从0到1记录学习 大模型技术之数学基础 day26
高等数学 导数 导数的概念 导数(derivative)是微积分中的一个概念。函数在某一点的导数是指这个函数在这一点附近的变化率(即函数在这一点的切线斜率)。导数的本质是通过极限的概念对函数进行局部的线性逼近。 当函数f的自变量在…...
计算机视觉与深度学习 | matlab实现ARIMA-WOA-CNN-LSTM时间序列预测(完整源码和数据)
以下是一个基于MATLAB的ARIMA-WOA-CNN-LSTM时间序列预测框架。由于完整代码较长,此处提供核心模块和实现思路,完整源码和数据可通过文末方式获取。 1. 数据准备(示例数据) 使用MATLAB内置的航空乘客数据集: % 加载数据 data = readtable(airline-passengers.csv); data …...
【C++】vector模拟实现
实现以下功能: 构造函数:a.无参默认构造 b.n个val构造 c.迭代器区间构造 d.initializer_list构造,类似于数组 e.拷贝构造 赋值重载 [ ]重载 实现reserve接口 实现size(),capacity()接口 实现push_bakc接口&#…...
门店管理五大痛点解析:如何用数字化系统实现高效运营
实体店竞争白热化,五大管理痛点正悄悄吞噬利润:客户资源流失、数据决策滞后、员工效率模糊、合同风险暗藏、利润核算混乱。本文直击核心问题,拆解数字化系统如何精准破局。 一、传统管理模式的五大核心痛点 1. 客户资源管理粗放化 老…...
双指针法高效解决「移除元素」问题
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 双指针法高效解决「移除元素」问题 双指针法高效解决「移除元素」问题一、问题描述二、解法解析:双指针法1. 核心思想2. 算法步骤3. 执行过程示例 三、关键点分析…...
【Linux笔记】——线程同步信号量与环形队列生产者消费者模型的实现(PV操作)
🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:【Linux笔记】——线程同步条件变量与生产者消费者模型的实现 🔖流水不争,争的是滔滔不…...
武汉科技大学人工智能与演化计算实验室许志伟课题组参加第八届智能优化与调度学术会议
武汉科技大学人工智能与演化计算实验室许志伟课题组参加第八届智能优化与调度学术会议 2025年5月15日至18日,第八届智能优化与调度学术会议在青岛金沙滩希尔顿酒店隆重召开。本次会议由青岛科技大学、湖南省系统仿真学会联合主办,中国仿真学会智能仿真优…...
SparkContext介绍
目录 1. 集群管理接口2. RDD操作中枢3. 任务分发引擎4. 执行环境配置5. 性能监控枢纽 SparkContext是Apache Spark的核心组件,其作用可概括为以下五个关键维度: 1. 集群管理接口 作为与集群管理器(YARN/Mesos/Standalone)通信的唯…...
海外盲盒系统开发:重构全球消费体验的科技引擎
当盲盒文化席卷全球,海外盲盒系统开发已成为重构消费体验的核心赛道。数据显示,2025年全球盲盒市场规模突破120亿,东南亚市场年增长率达4540。我们开发的海外盲盒系统,以技术创新为驱动,打造覆盖全链路的全球化解决方案…...
IP风险画像技术:如何用20+维度数据构建网络安全护城河?
IP风险画像技术作为一种先进的网络安全手段,正逐步成为构建网络安全护城河的重要工具。通过多维度数据的分析和挖掘,IP风险画像技术能够精准识别网络中的潜在威胁,为企业和组织提供更加全面的安全保障。 IP风险画像技术基于IP地址的行为分析…...
Vitest下一代前端单元测试框架
什么是Vitest? Vitest是有vue官方主导开发的下一代测试框架,一个原生支持Vite的测试框架。非常快速。 Vitest 与 Jest 兼容,具有开箱即用的 ESM、Typescript 和 JSX 支持,并且由 esbuild 提供支持。它在测试过程中使用 Vite 开发…...
车道线检测:自动驾驶的“眼睛”
在自动驾驶技术的庞大体系中,车道线检测扮演着至关重要的角色,它就像是自动驾驶汽车的“眼睛”,帮助车辆感知道路边界,从而实现安全、准确的行驶。今天,我们就来深入探讨一下车道线检测的奥秘,看看它是如何…...
基于NLP技术的客户投诉与需求文本分类方法研究
目录 摘要 1. 引言 2. 文本分类基础 2.1 文本分类的定义与类型 2.2 文本分类的评价指标 3. 传统文本分类方法 3.1 基于TF-IDF和SVM的方法 3.2 基于主题模型和词向量的改进方法 4. 深度学习文本分类方法 4.1 TextCNN模型 4.2 BiLSTM模型 4.3 注意力机制与Transformer…...
HarmonyOS5云服务技术分享--自有账号对接AGC认证
✨ 手把手教你:用自有账号玩转华为AGC认证服务 ✨ Hi 各位开发者朋友~👋 今天咱们来聊聊如何将自家已有的账号系统与华为的AppGallery Connect(AGC)认证服务无缝对接。不用重复造轮子,还能享受AGC…...
算法与数据结构:位运算与快速幂
文章目录 位运算快速幂 位运算 在计算机的世界中,一切数字都是二进制的。类比于现实世界中我们所使用的十进制,二进制即为「逢二进一」的运算体系。 我们以 B、D 来分别标记二进制与十进制,例如 10D 表示十进制中的 10,而 10B 则…...
基于R语言的空间异质性数据分析技术
在自然和社会科学领域,存在大量与地理或空间相关的数据,这些数据通常具有显著的空间异质性。传统的统计学方法在处理这类数据时往往力不从心。基于R语言的一系列空间异质性数据分析方法,如地理加权回归(GWR)、地理加权…...
数据分析预备篇---Pandas的DataFrame的更多操作
DataFrame的统计方法 之前学习Series的时候接触了一些很实用的统计相关方法,包括max求最大值,min求最小值,sum求和,mean求平均值等。DataFrame有类似的方法,由于它是二维的,我们可以指定到底是沿着索引纵向操作,相当于沿着轴0(计算每列的统计量);还是说沿着列名横向操…...
精益数据分析(73/126):黏性阶段的功能优先级法则——七问决策模型与风险控制
精益数据分析(73/126):黏性阶段的功能优先级法则——七问决策模型与风险控制 在创业的黏性阶段,如何从海量的功能创意中筛选出真正能提升用户留存的关键改动?今天,我们结合《精益数据分析》中的“开发功能…...
Linux系统之traceroute命令详解:追踪网络路径的核心工具
Linux系统之traceroute命令详解:追踪网络路径的核心工具 一、traceroute介绍1. 基本介绍2. 核心原理 二、安装与基本使用1. 安装traceroute2. 基础语法 三、基本使用四、常用参数与场景五、典型应用场景1. 定位网络延迟问题2. 检测防火墙拦截3. 绕过DNS解析问题4. 对…...
通义灵码2.5智能体模式联合MCP:打造自动化菜品推荐平台,实现从需求到部署的全流程创新
一、项目背景与目标 随着人工智能技术的快速发展,AI 辅助开发工具正在改变传统的软件开发模式。通义灵码 2.5 版本的发布,通过 Qwen3 模型 和 编程智能体模式 的结合,实现了从需求描述到代码生成的全流程自动化。同时,其对 魔搭M…...
Spring的AOP在什么场景下会失效?
SpringAOP是通过动态代理实现的,所以想要AOP生效就是需要动态代理生效,并且可以提前调用到代理对象的方法。 什么情况下会不走动态代理呢? 首先就是类内部的调用,比如一些私有方法的调用,内部类调用,以及同…...
基于规则引擎与机器学习的智能Web应用防火墙设计与实现
基于规则引擎与机器学习的智能Web应用防火墙设计与实现 引言:智能防御的必然选择 在2023年OWASP最新报告中,传统Web应用防火墙(WAF)对新型API攻击的漏报率高达67%,而误报导致的正常业务拦截损失每年超过2.3亿美元。面…...
NODE-I916 I721模块化电脑发布,AI算力与超低功耗的完美平衡
在智能工业与边缘计算蓬勃发展的今天,企业对计算设备的性能与能效需求日益严苛。全新推出NODE-I916与NODE-I721模块化电脑,分别搭载英特尔 酷睿™ Ultra 平台与Alder Lake-N平台,以差异化CPU配置为核心,为AI推理、工业自动化及嵌入…...
2024年热门AI趋势及回顾
人工智能的崛起 2024 年可能会被铭记为人工智能不再是一种技术新奇事物,而是成为现实的一年。微软、Salesforce 和 Intuit 等巨头将人工智能融入主流企业解决方案;从文案写作到数据分析,专门的人工智能应用程序和服务如雨后春笋般涌现&#…...
Python + moviepy:根据图片或数据高效生成视频全流程详解
前言 在数据可视化、自媒体内容生产、学术汇报等领域,我们常常需要将一组图片或一段变动的数据,自动合成为视频文件。这样不仅能提升内容表现力,也极大节省了人工操作时间。Python作为数据处理和自动化领域的王者,其`moviepy`库为我们提供了灵活高效的视频生成方案。本文将…...
文档债务拖累交付速度?5大优化策略文档自动化
开发者在追求开发速度的过程中,往往会忽视文档的编写,如省略设计文档、代码注释或API文档等。这种做法往往导致在后期调试阶段需要花费三倍以上的时间来理解代码逻辑,进而形成所谓的文档债务,严重拖累交付速度并造成资源浪费。而积…...
java接口自动化初识
简介 了解什么是接口和为什么要做接口测试。并且知道接口自动化测试应该学习哪些技术以及接口自动化测试的落地过程。 一、什么是接口 在这里我举了一个比较生活化的例子,比如我们有一台笔记本,在笔记本的两端有很多插口。例如:USB插口。那…...
Wan2.1 文生视频 支持批量生成、参数化配置和多语言提示词管理
Wan2.1 文生视频 支持批量生成、参数化配置和多语言提示词管理 flyfish 设计 一个基于 Wan2.1 文本到视频模型的自动化视频生成系统。 文件关系图 script.py ├── 读取 → config.json │ ├── 模型配置 → 加载AI模型 │ ├── 生成参数 → 控制生成质量 │ └…...
高阶数据结构——AVL树的实现(详细解答)
目录 1.AVL的概念 2.AVL树的实现 2.1 AVL树的插入 2.1.1 平衡因子的更新 2.1.2 AVL树的插入 2.2 旋转 2.2.1 旋转的原则 2.2.2 右单旋 2.2.3 左单旋 2.2.4 先左后右双旋转 2.2.5 先右后左双旋转(先左后右双旋转模型的镜像) 2.2.6 代码总结 2…...
工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎,支持现实世界的流程自动化需求
前言 大家好,我是老马。 最近想设计一款审批系统,于是了解一下关于流程引擎的知识。 下面是一些的流程引擎相关资料。 工作流引擎系列 工作流引擎-00-流程引擎概览 工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎&#x…...
自定义geojson生成物体的样式
在上节我们学习了如何在cesium中导入geojson数据,本节我们来学习如何让它变得更加炫酷. // 加载GeoJSON数据 // 使用Cesium的GeoJsonDataSource加载指定URL的地理数据 Cesium.GeoJsonDataSource.load("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json&quo…...
在tensorflow源码环境里,编译出独立的jni.so,避免依赖libtensorflowlite.so,从而实现apk体积最小化
需要在APP里使用tensorflow lite来运行PC端训练的model.tlite,又想apk的体积最小,尝试了如下方法: 1. 在gradle里配置 implementation("org.tensorflow:tensorflow-lite:2.16.1") 这样会引入tensorflow.jar,最终apk的…...
springboot框架 集成海康ISUP-SDK 并实现 协议透传给设备下发指令!
最近有一个需求 需要通过springboot框架 来和 海康的摄像头设备进行通信,就研究了一下 海康的官方ISUP-SDK 文档对接。这个sdk 主要实现了 第三方快速集成海康的设备。 海康的文档地址: https://open.hikvision.com/docs/docId?productId5cda567cf47ae8…...