当前位置：首页 > news >正文

解决 Element UI 嵌套弹窗的状态管理问题！！！

news 来源：原创 2025/7/20 7:08:55

解决 Element UI 嵌套弹窗的状态管理问题 🔧

问题描述 ❓

在使用 Element UI 开发一个多层嵌套弹窗功能时，遇到了以下问题：

弹窗只能打开一次，第二次点击无法打开 🚫
收到 Vue 警告：避免直接修改 prop 值 ⚠️
弹窗状态管理混乱，导致显示异常 😵

问题分析 🔍

让我们先看看组件的层级结构：

问题主要出在三个地方：

prop 突变：直接修改了 visible prop
状态同步：父子组件之间的状态未正确同步
生命周期：组件销毁和重建时的状态处理不当

解决方案 💡

1. 修改 prop 管理方式

修改前的代码：

<el-dialog :visible.sync="visible">

修改后的代码：

<el-dialog :visible="visible"@close="handleClose">

2. 优化状态管理 🔄

关键代码改进：

// fake-clue-form.vue
@Watch('visible')
private onVisibleChange(val: boolean) {if (val) {this.$nextTick(() => {// 重置表单this.form = {title: '',description: '',// ...其他字段}// 合并传入的数据if (this.formData) {this.form = { ...this.form, ...this.formData }}})}
}private handleClose() {this.$emit('update:visible', false)
}

3. 完善生命周期处理 ⚡

技术要点总结 📝

使用 @Watch 监听 prop 变化，而不是直接修改
通过 $emit 向父组件通知状态变化
使用 $nextTick 确保状态更新和 DOM 渲染的正确时序
合理使用对象解构避免引用类型带来的问题
添加 destroy-on-close 确保组件完全重置

最佳实践建议 🌟

始终使用事件通知父组件而不是直接修改 prop
保持单向数据流，提高代码可维护性
合理使用 Vue 的生命周期钩子和异步更新机制
注意组件之间的状态同步和通信方式
使用 TypeScript 提供更好的类型支持和代码提示

结语 🎉

通过这次问题的解决，我们不仅修复了具体的 bug，还总结出了一套处理 Vue 组件状态管理的最佳实践。这些经验对于开发复杂的前端应用都很有帮助。

希望这篇文章能帮助遇到类似问题的开发者！如果你有任何问题或建议，欢迎在评论区讨论。 💬

#Vue #ElementUI #前端开发 #技术博客

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"found in---> <FakeClueForm> at src/views/tools/fake-strategy/components/fake-clue-form.vue<ElDialog> at packages/dialog/src/component.vue<FakeClueList> at src/views/tools/fake-strategy/components/fake-clue-list.vue<ElDialog> at packages/dialog/src/component.vue<FirstAuditList> at src/views/tools/fake-strategy/components/identify-list.vue<TemplateList> at src/views/tools/fake-strategy/index.vue<AppMain> at src/layout/components/AppMain.vue<Layout> at src/layout/index.vue<App> at src/App.vue<Root>

在这里插入图片描述

解决 Element UI 嵌套弹窗的状态管理问题！！！

解决 Element UI 嵌套弹窗的状态管理问题 🔧 问题描述 ❓ 在使用 Element UI 开发一个多层嵌套弹窗功能时，遇到了以下问题： 弹窗只能打开一次，第二次点击无法打开 🚫收到 Vue 警告：避免直接修改 prop 值…...

编程日记 2025/7/20 7:08:55

基于STM32单片机的智能手环/音乐播放/语音识别

基于STM32单片机的智能手环/音乐播放/语音识别持续更新，欢迎关注!!! ** 基于STM32单片机的智能手环/音乐播放/语音识别 ** 21世纪，社会高速发展，生活物质越来越丰富，随着科技的进步，智能化成为了人们关注的焦点&am…...

编程日记 2025/7/20 7:06:25

NFC 智能门锁全栈解决方案：移动端、服务器、Web 管理平台

目录一、系统整体架构二、移动端 APP 开发 2.1 开发环境与基础准备 2.2 主要功能模块 2.3 示例代码（Android/Kotlin 简化示例） 三、后台服务开发 3.1 环境准备 3.2 主要功能 3.3 示例代码（Node.js Express 简化示例） …...

编程日记 2025/7/19 18:23:21

使用 Python 开发 MCP Server 及 Inspector 工具详解

使用 Python 开发 MCP Server 及 Inspector 工具详解前言模型上下文协议 (Model Context Protocol, MCP) 是一种新兴的协议，旨在让大型语言模型 (LLM) 更容易地与外部工具和服务集成。本文将介绍如何使用 Python 开发一个 MCP Server，并详细讲解如何使…...

编程日记 2025/7/12 14:13:13

论坛系统测试报告

一、项目背景为论坛系统项目设计并进行自动化测试。论坛系统由六个页面构成：用户登录页、用户注册页、个人中心页面、我的帖子页面、帖子编辑页、帖子列表页以及帖子详情页。通过使用selenium工具来定位到web中的元素，对获取到的元素进行自动化测试等操…...

编程日记 2025/7/20 7:05:01

Android一个APP里面最少有几个线程

Android应用启动时，默认会创建一个进程，该进程中最少包含5个系统自动创建的线程，具体如下： Main线程（主线程/UI线程）负责处理用户交互、UI更新等核心操作，所有与界面相关的逻辑必须在此线程执行。若在此线程执行耗时操作（如网络请求），会导致界面卡顿甚至触发ANR（应…...

编程日记 2025/7/20 7:04:01

DML 数据操纵语言学习笔记

一、DML 核心概念体系 1.1 语言定位与边界 DML（Data Manipulation Language）作为 SQL 三大核心语言之一，专注于数据行级操作，区别于 DDL（结构定义）和 DCL（权限控制）。其核心指令包…...

编程日记 2025/7/15 22:24:31

7-Zip 功能介绍

7-Zip 是一款开源、高效的文件压缩与解压缩工具，支持多种格式，以高压缩率和灵活性著称。以下是其核心功能： 多格式支持压缩 / 解压：支持 7z（默认格式，压缩率极高）、ZIP、RAR、GZIP、BZIP2、TAR…...

编程日记 2025/7/16 17:28:52

《基于python游戏设计与实现》开题报告

个人主页：@大数据蟒行探索者一、研究背景、目的及意义（一）研究背景游戏的普及与成功：随着智能手机的普及和网络技术的发展，手机游戏产业逐渐成熟，成为娱乐文化产业的重要组成部分。《开心消消乐》作为一款休闲类游戏，自上线以来凭借其简单易上手的玩法和丰富的…...

编程日记 2025/7/20 6:55:06

鸿蒙学习笔记（3）-像素单位、this指向问题、RelativeContainer布局、@Style装饰器和@Extend装饰器

一、像素单位物理像素：用px表示。逻辑像素：在布局的时候，底层针对物理像素和屏幕尺寸关系进行转化的中间层。分辨率：代表在屏幕上到底布局了多少了像素点（发光点) 官方同时也提供了相关单位，在开发中…...

编程日记 2025/7/20 7:02:52

Selenium之简介

Selenium简介首先，让我们看看官网是怎么定义的 Selenium是一个支持web浏览器自动化的一系列工具和库的综合项目，提供了扩展来模拟用户和浏览器的交互，用于扩展浏览器分配的分发服务器；用于W3C WebDriver规范的基础架构其实&a…...

编程日记 2025/7/20 6:56:45

使用Ollama(自定义安装位置)与RagFlow构建本地知识库

目录 1. 为什么不直接使用网页版DeepSeek?2. 如何实现网页版DeepSeek不能实现的需求?3. 目标效果预览4. 为什么要使用RAG技术?RAG和模型微调的区别?5. 什么是Embedding?为什么需要“Embedding模型”?6. 本地部署全流程6.1 下载ollama，通过olama将DeepSeek模型…...

编程日记 2025/7/20 6:54:01

基于ssm的医院预约挂号系统

编程日记 2025/7/20 1:38:57

先装less npm install less less-loader --save-dev 然后将该 loader 添加到 webpack 的配置中去，例如： webpack.config.js module.exports {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loade…...

编程日记 2025/7/20 6:54:00

DeepSeek概述

一、DeepSeek概述 1.1 DeepSeek是什么 DeepSeek是一家专注通用人工智能（AGI，Artificial General Intelligence）的中国科技公司，主攻大数据研发与应用。DeepSeek-R1是其开源的推理模型，擅长处理复杂任务且可免费商用…...

编程日记 2025/7/20 6:51:37

生成模型速通（Diffusion，VAE，GAN）

基本概念参考视频https://www.bilibili.com/video/BV1re4y1m7gb/?spm_id_from333.337.search-card.all.click&vd_sourcef04f16dd6fd058b8328c67a3e064abd5 生成模型其实是主要是依赖概率分布，对输入特征的概率密度函数建模隐空间（latent space)…...

编程日记 2025/7/20 7:00:26

linux/android 如何获取当前系统启动时长

uptime 指令获取 trinket:/ # uptime12:03:31 up 3 min, 0 users, load average: 1.02, 0.68, 0.29...

编程日记 2025/7/20 6:48:00

Elasticsearch客户端工具初探--kibana

1 Kibana简介 Kibana是Elastic Stack（ELK）中的可视化工具，用于对Elasticsearch中存储的数据进行搜索、分析和可视化展示。它提供了直观的Web界面，支持日志分析、业务监控、数据探索等功能，广泛应用于运维监控、安全分析…...

编程日记 2025/7/15 19:53:44

深克隆和浅克隆（建造者模式，内含简版）

让我们来看一个例子： 设计一个客户类Customer，其中客户地址存储在地址类Address中，用浅克隆和深克隆分别实现Customer对象的复制并比较这两种克隆方式的异同。代码实现 Customer类和Address类都是实现的Java 内置的 java.lang.Cloneable …...

编程日记 2025/7/20 6:57:52

吴恩达机器学习笔记复盘（十二）逻辑回归的梯度下降和拟合问题

梯度下降算法推导过程一、逻辑回归模型基础逻辑回归用于二分类问题，其假设函数为sigmoid函数： 其中，是模型参数向量，是特征向量。输出表示样本属于正类的概率。二、损失函数逻辑回归的损失函数采用对数损失（交…...

编程日记 2025/7/20 1:20:38

OSPF五种报文分析（仅部分比较重要的）

OSPF五种报文分别是： hello报文，DBD数据库描述报文，LSR链路状态请求报文，LSU链路状态更新报文，LSACK链路状态确认包以下是这五种报文的详细解读： 1. Hello报文作用： 用于邻居的发现、建立和…...

编程日记 2025/7/20 6:52:47

Ubuntu 22.04 二进制安装单节点 MySQL

Ubuntu 22.04 二进制安装 MySQL LTS（长期支持版）完整教程 MySQL LTS 版本选择： 目前 MySQL 8.4.4 是长期支持（LTS）版本，持续更新并保持稳定。下载版本： 你也可以在 MySQL 官方网站确认最新稳…...

编程日记 2025/7/20 6:46:41

python处理音频相关的库

1 音频信号采集与播放 pyaudio import sys import pyaudio import wave import timeCHUNK 1024 FORMAT pyaudio.paInt16 CHANNELS 1#仅支持单声道 RATE 16000 RECORD_SECONDS 3#更改录音时长#录音函数，生成wav文件 def record(file_name):try:os.close(file_…...

编程日记 2025/7/18 7:39:58

python+ffmpeg给音频添加背景音乐

说明： 我希望用python，将name.mp3这段录音文件，添加背景音乐，bg.mp3，然后生成新的文件 step1: 添加依赖 pip install pydubstep2:下载ffmpeg 1.打开windows powershell ，管理员运行 2.winget install ff…...

编程日记 2025/7/16 12:38:27

《TypeScript 面试八股：高频考点与核心知识点详解》

“你好啊！能把那天没唱的歌再唱给我听吗？ ” 前言因为主包还是主要学习js，ts浅浅的学习了一下，在简历中我也只会写了解，所以我写一些比较基础的八股，如果是想要更深入的八股的话还是建议找别人的。 Ts基…...

编程日记 2025/7/20 6:44:13

鸡生蛋还是蛋生鸡？基于python的CCM因果关系计算

文章目录前言一、安装二、代码1.全部代码2.结果展示总结前言因果推断在科学研究中起着重要的作用，尤其是在复杂系统中，例如生态学、气候学、经济学等领域。在这些领域中，了解变量之间的因果关系可以帮助我们更好地理解系统的动态行为和相互作用。传统的相关性分析并不足以…...

编程日记 2025/7/20 6:47:59

PyBluez2 的详细介绍、安装指南、使用方法及配置说明

PyBluez2：Python 蓝牙开发的核心库一、PyBluez2 简介 PyBluez2 是 Python 的开源蓝牙编程库，支持蓝牙 2.0、BLE（低功耗蓝牙）和传统蓝牙协议栈的开发。它提供了对蓝牙硬件适配器的底层控制，适用于设备发现、配对、数…...

编程日记 2025/7/19 16:26:30

鸿蒙HarmonyOS NEXT之无感监听

鸿蒙中存在一些无感监听，这些监听经过系统API封装使用很简单，但是对实际业务开发中有很重要，例如埋点业务、数据统计、行为上报、切面拦截等。 Navigation的页面切换在鸿蒙中Navigation被用来作为路由栈进行页面跳转，如果你想知…...

编程日记 2025/7/20 6:26:43

质检LIMS系统在食品生产加工企业的应用如何保证食品生产企业的安全

在食品生产加工领域，质量安全是贯穿全产业链的生命线。随着《食品安全法》对全过程追溯要求的深化，传统实验室管理模式已难以满足高效、精准的质量管控需求。质检实验室信息管理系统（LIMS）作为数字化升级的核心工具，正…...

编程日记 2025/7/15 12:09:11

linux中如何获取其他进程的退出状态

进程的退出状态至关重要，用wait系列函数，父进程可以捕捉到子进程的退出状态，若给定任意进程，其父进程已经确定，无法改变，自己如何获取到其退出状态呢。可以用ptrace系统api attach到相应的进程&#xff0c…...

编程日记 2025/7/18 19:46:12

【android】补充

3.3　常用布局本节介绍常见的几种布局用法，包括在某个方向上顺序排列的线性布局，参照其他视图的位置相对排列的相对布局，像表格那样分行分列显示的网格布局，以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1　线性布局Linea…...

编程日记 2025/7/16 17:21:19

Unix Domain Socket、IPC、RPC与gRPC的深度解析与实战

Unix Domain Socket、IPC、RPC与gRPC的深度解析与实战引言在分布式系统和本地服务通信中，进程间通信（IPC）与远程过程调用（RPC）是核心能力。本文将深入剖析 Unix Domain Socket（UDS）、IPC、RP…...

编程日记 2025/7/18 1:06:39

从 MySQL 到时序数据库 TDengine：Zendure 如何实现高效储能数据管理？

小T导读：TDengine 助力广州疆海科技有限公司高效完成储能业务的数据分析任务，轻松应对海量功率、电能及输入输出数据的实时统计与分析，并以接近 1 : 20 的数据文件压缩率大幅降低存储成本。此外，taosX 强大的 transform 功能帮助用…...

编程日记 2025/7/18 10:04:23

华为OD机试A卷 - 积木最远距离（C++ Java JavaScript Python ）

最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述小华和小薇一起通过玩积木游戏学习数学。他们有很多积木，每个积木块上都有一个数字，积木块上的数字可能相同。小华随机拿一些积木挨着排成一排，请小薇找到这排积木中数字相同且所处…...

编程日记 2025/7/19 7:57:31

Zerotier虚拟局域网在树莓派的应用和Syncthing配合Zerotier实现端到端文件同步

一、Zerotier的部署 1、官网注册账号 https://my.zerotier.com/i 2、选择linux系统，执行安装Zerotier curl -s https://install.zerotier.com | sudo bash3、将树莓派网络加入Zerotier zerotier-cli join DB62228FEDF6CE55DB62228FEDF6CE55 为你的Zerotier IP 需…...

编程日记 2025/7/17 23:44:12

C++设计模式-桥梁模式：从基本介绍，内部原理、应用场景、使用方法，常见问题和解决方案进行深度解析

一、桥梁模式基本介绍桥梁模式（Bridge Pattern）是一种结构型设计模式，又叫桥接模式，其核心思想是将抽象部分与实现部分分离，使它们可以独立变化。这种模式通过组合代替继承，有效解决了多层继承导致的类爆…...

编程日记 2025/7/14 9:11:16

系统转换、系统维护、净室软件工程、构件软件工程(高软51)

系列文章目录系统转换、系统维护、净室软件工程、构件软件工程文章目录系列文章目录前言一、系统转换二、系统维护三、净室软件工程四、基于构件的软件工程总结前言本节讲明遗留系统的系统转换、系统维护、净室软件工程、基于构件软件工程相关知识。一、系统转换就是讲…...

编程日记 2025/6/28 4:27:02

自然语言处理（13:RNN的实现)

系列文章目录第一章 1:同义词词典和基于计数方法语料库预处理第一章 2:基于计数方法的分布式表示和假设，共现矩阵，向量相似度第一章 3:基于计数方法的改进以及总结第二章 1:word2vec 第二章 2:word2vec和CBOW模型的初步实现第二章 3:CBOW模型…...

编程日记 2025/7/16 22:59:09

Docker镜像迁移方案

Docker镜像迁移方案文章目录 Docker镜像迁移方案一：背景二：操作方式三：异常原因参考： 一：背景比如机器上已经有先有的容器，但是docker pull的时候是失败的二：操作方式 1、停止正在运行的容器…...

编程日记 2025/7/15 4:30:05

深度学习框架PyTorch——从入门到精通（10）PyTorch张量简介

这部分是 PyTorch介绍——YouTube系列的内容，每一节都对应一个youtube视频。（可能跟之前的有一定的重复） 创建张量随机张量和种子张量形状张量数据类型使用PyTorch张量进行数学与逻辑运算简单介绍——张量广播关于张量更多的数学操作原地修改…...

编程日记 2025/7/12 15:10:59

Springboot 集成 Flowable 6.8.0

1. 创建 Spring Boot 项目通过 Spring Initializr（https://start.spring.io/ ）创建一个基础的 Spring Boot 项目，添加以下依赖： Spring WebSpring Data JPAMySQL DriverLombok（可选，用于简化代码&#x…...

编程日记 2025/7/17 22:57:32

Vue3 项目通过 docxtemplater 插件动态渲染 .docx 文档（带图片）预览，并导出

Vue3 项目通过 docxtemplater 插件动态渲染 .docx 文档（带图片）预览，并导出预览安装插件示例代码项目目录结构截图实际效果截图动态渲染 .docx 文档（带图片），预览、导出安装插件docx 模板文件内容完整代码…...

编程日记 2025/7/17 18:38:05

实验一、Linux环境下实现进度条小程序：深入解析核心实现与关键技术细节

目录引言：为什么需要进度条？环境准备与项目结构分析原理剖析：从终端输出到动态刷新代码逐行解析（附完整代码） 4.1 头文件与宏定义4.2 进度条的动态构建逻辑4.3 关键转义字符：\r与\n的深度对比4.4 缓冲机制…...

编程日记 2025/7/16 23:22:12

生活电子常识——cmd不能使用anaconda的python环境，导致输入python打开应用商店

前言电脑已经安装了anaconda,从自带的Anaconda Prompt (Anaconda3)中是可以识别python环境的，然而切换到cmd时，突然发现cmd中无法识别anaconda的python环境，竟然打开了应用商店让我安装Python，这当然是不对的。解决这是因为…...

编程日记 2025/7/14 21:30:58

TypeScript中的声明合并：与JavaScript的对比与实践指南

引言在大型项目开发中，代码的可维护性和可扩展性至关重要。TypeScript作为JavaScript的超集，通过静态类型系统带来了更强大的代码组织能力。其中声明合并（Declaration Merging） 是TypeScript独有的重要特性，本文将深…...

编程日记 2025/7/9 4:37:31

数据结构初阶-二叉树链式

目录 1.概念与结构 2.二叉数链式的实现 2.1遍历规则 2.2申请内存空间 2.3手动构建一棵二叉树 2.4二叉树结点的个数 2.5二叉树叶子结点的个数 2.6二叉树第K层结点个数 2.7二叉树的高度 2.8二叉树中查找值为x的结点 2.9二叉树的销毁 3.层序遍历 3.1概念 3.2层序遍历…...

编程日记 2025/7/15 5:05:58