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

vue3中watch的使用示例

使用情况说明:

1、父组件中有个表格,点击表格行的修改基础信息,弹出修改对话框;

2、修改内容点击确认,发送请求,后端更新数据;不修改内容不发送请求;

3、可以连续修改;

父组件相关代码:

script

import { ref } from "vue";
import type { ApplyBasicInfo } from "@/interface";
import ApplyBasicInfoDialog from "./ApplyBasicInfoDialog.vue";// 表格数据
const tableData = ref<ApplyBasicInfo[]>([]);
// 表格选择行
const tableSelectedRow = ref<ApplyBasicInfo>();
// 修改受理基础信息对话框
const applyBasicInfoDialogRef = ref<InstanceType<typeof ApplyBasicInfoDialog>>();
// 渲染修改受理基础信息对话框标识,默认不渲染
const isCreateApplyBasicInfoDialog = ref(false);// 修改基础信息
const onModifyBasicInfoClick = (row: any) => {tableSelectedRow.value = row;// 如果尚未渲染子组件ApplyBasicInfoModifyDialogif (!isCreateApplyBasicInfoDialog.value) {// 标识渲染子组件ApplyBasicInfoModifyDialog,响应式标识的值为真时,满足v-if的条件,开始渲染isCreateApplyBasicInfoDialog.value = true;} else {// 调用子组件的showDialog方法,显示对话框applyBasicInfoDialogRef.value?.showDialog();}
};

template 

<el-table-column label="操作" header-align="center" :align="`center`" fixed="right" width="200"><template #default="scope"><el-button class="btn-slots" type="primary" size="small" plain @click="onModifyBasicInfoClick(scope.row)">修改基础信息</el-button></template></el-table-column><ApplyBasicInfoDialogv-if="isCreateApplyBasicInfoDialog && tableSelectedRow"ref="applyBasicInfoDialogRef":applyBasicInfo="tableSelectedRow"operateCommandType="info-modify" />

子组件相关代码:

 script

import { ref, watch, type PropType } from "vue";
import type { ApplyBasicInfo } from "@/interface";const props = defineProps({applyBasicInfo: {type: Object as PropType<ApplyBasicInfo>, // 使用标准的PropType进行对象类型定义required: true // 表示父组件必须传递这个prop,不能与 default 同时使用},operateCommandType: {type: String,default: "info-view" // 表示当父组件没有传递时使用默认值,不能与 required 同时使用}
});// 对话框显示标识
const dialogVisible = ref(false);
// 监视标识
let applyBasicInfoChanged = false;// 显示对话框
const showDialog = () => {// 显示对话框dialogVisible.value = true;
};watch(() => props.applyBasicInfo, // 点击表格行修改按钮,父组件的tableSelectedRow重新赋值会触发、在对话框中修改内容,修改props.applyBasicInfo(也就是父组件的tableSelectedRow)的属性也会触发() => {// 监视标识,标识 applyBasicInfo 已经发生变化applyBasicInfoChanged = true;},{ deep: true }
);defineExpose({ showDialog });

运行效果:

  

相关文章:

vue3中watch的使用示例

使用情况说明&#xff1a; 1、父组件中有个表格&#xff0c;点击表格行的修改基础信息&#xff0c;弹出修改对话框&#xff1b; 2、修改内容点击确认&#xff0c;发送请求&#xff0c;后端更新数据&#xff1b;不修改内容不发送请求&#xff1b; 3、可以连续修改&#xff1b…...

OpenBMC:BmcWeb 处理http请求7 完成http请求

OpenBMC:BmcWeb 处理http请求6 调用路由处理函数-CSDN博客 用户会通过填充asyncResp设置响应内容 OpenBMC:BmcWeb 处理http请求1 生成Request和AsyncResp对象_bmc web-CSDN博客 构造了asyncResp 可以看到asyncResp是一个shared_ptr 并且在构造后设置了setCompleteRequestHand…...

pair与tuple

pair pair是 C STL&#xff08;标准模板库&#xff09;中的一个模板类&#xff0c;用于表示一对相关的对象。它是一个简单的容器&#xff0c;存储两个数据项&#xff0c;它们可以是不同类型的。pair 常用于需要将两个元素一起操作的情况&#xff0c;例如在处理字典&#xff08…...

RecyclerView 和 ListView从 设计理念、性能优化 和 扩展能力 三个维度展开分析

一、RecyclerView 的核心定义&#xff08;设计理念&#xff09; RecyclerView 是 Android Jetpack 中的高级滚动容器&#xff0c;用于展示大数据集&#xff0c;其核心特性包括&#xff1a; 模块化设计&#xff1a;分离布局管理&#xff08;LayoutManager&#xff09;、动画&am…...

望远镜自动调焦怎样利用直线轴承结构?

以下是对望远镜调焦结构相关内容的分析&#xff1a; 调焦结构基本构成与原理 驱动部分&#xff1a;采用步进电机驱动滚珠丝杠&#xff0c;步进电机能够精确控制转动角度和步数&#xff0c;从而精确控制滚珠丝杠的转动&#xff0c;为调焦提供动力来源。 传动部分&#xff1a;…...

C++学习之服务器EPOLL模型、处理客户端请求、向客户端回复数、向客户端发送文件

目录 1.启动epoll模型 2.和客户端建立新连接 3.接受客户端Http请求数据 4.代码回顾从接受的数据中读出请求行 5.请求行解析 6.正则表达式以及匹配 7.解析请求行以及后续处理 8.对path处理说明 9.如何回复响应数据 10.对文件对应content-type如何查询 11.服务器处理流…...

Explain的使用

1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_keys key key_len ref rows extra各列。 其中, type=const表示通过索引一次就找到了; key=primary的话,表示使用了主键; type=all,表示为全表…...

DDoS防御与流量优化

实训背景 某在线游戏平台遭受频繁DDoS攻击&#xff0c;需部署Linux网关实现以下防护与优化功能&#xff1a; 防御SYN洪水攻击&#xff1a;自动识别并拦截高频SYN请求。连接数限制&#xff1a;限制单个IP的最大并发连接数为100&#xff0c;防止资源耗尽。流量优先级保障&#…...

文件上传漏洞原理学习

什么是文件上传漏洞 文件上传漏洞是指用户上传了一个可执行的脚本文件&#xff0c;并通过此脚本文件获得了执行服务器端命令的能力。“文件上传” 本身没有问题&#xff0c;有问题的是文件上传后&#xff0c;服务器怎么处理、解释文件。如果服务器的处理逻辑做的不够安全&#…...

005.Gitlab CICD变量使用

文章目录 变量介绍预定义变量项目信息类版本控制类流水线执行类runner环境类作业执行类容器注册类其他类别 自定义变量 变量使用预定义变量使用创建流水线提交流水作业 自定义变量使用创建流水线提交流水作业 图形UI创建变量UI自定义变量创建流水线提交流水作业 变量介绍 预定…...

即时通讯软件BeeWorks,企业如何实现细粒度的权限控制?

BeeWorks作为一款专为企业设计的即时通讯平台&#xff0c;高度重视用户隐私安全&#xff0c;采取了多种措施来保障数据的保密性、完整性和可用性。 首先&#xff0c;BeeWorks采用私有化部署模式&#xff0c;企业可以将服务器架设在自己的网络环境中&#xff0c;所有通讯数据&a…...

高可用架构:Keepalived、Nginx与Docker深度解析

本文深入解析了Keepalived技术&#xff0c;阐述其基于VRRP协议实现高可用的核心功能&#xff0c;包括虚拟路由器冗余、健康检查、负载均衡集成及脚本执行与通知。同时&#xff0c;设计了Nginx高可用方案&#xff0c;涵盖双机主从、主主及多点集群模式&#xff0c;分析其优缺点。…...

127.0.0.1本地环回地址(Loopback Address)

127.0.0.1 是计算机网络中的一个特殊IPv4地址&#xff0c;称为本地环回地址&#xff08;Loopback Address&#xff09;&#xff0c;主要用于以下用途&#xff1a; 1. 基本定义 本地主机&#xff08;Localhost&#xff09;&#xff1a;该地址始终指向当前正在使用的计算机本身&a…...

Windows Terminal 美化增强攻略 2.0:打造个性化高效开发环境(快捷键介绍、编程语言环境、starship美化、高效命令行工具)

前言&#xff1a;从 1.0 到 2.0&#xff0c;终端美化进阶之旅 去年&#xff0c;我曾在文章《使用 oh-my-posh 和 clink 打造个性化 PowerShell 和 CMD》中分享了 Windows 终端的美化方案。那时&#xff0c;我选择了 oh-my-posh 作为核心工具&#xff0c;虽然效果不错&#xff…...

网络出故障时,四大表(MAC表、ARP表、路由表、转发表)怎么查?看看这套排查顺序

网络出故障时&#xff0c;四大表 (MAC表、ARP表、路由表、转发表) 怎么查 说正题之前&#xff0c;我们先来假设一个场景&#xff1a; 场景假设&#xff1a; 一台华为设备突然上不了网&#xff0c;或者访问某个 IP 不通。 你会怎么排查&#xff1f; 别慌&#xff0c;兄弟&a…...

第七天 开始Unity Shader的学习之Unity中的基础光照之高光反射光照模型

Unity Shader的学习笔记 第七天 开始Unity Shader的学习之Unity中的基础光照之高光反射光照模型 文章目录 Unity Shader的学习笔记前言一、高光反射光照模型1.逐顶点光照① Properties② 顶点着色器中计算高光specular③ Fallback效果展示 2.逐像素光照① 片元着色器输出结构体…...

《从 MyBatis-Plus 到 Elasticsearch:一个后端的性能优化踩坑实录》

​ 最近接手了一个老项目&#xff0c;单表查询用 MyBatis-Plus 写得飞起&#xff0c;但一到​​多表关联模糊搜索​​就卡成 PPT。痛定思痛&#xff0c;决定引入 Elasticsearch 优化查询性能&#xff0c;结果踩坑无数……记录下这次​​从 ORM 到搜索引擎​​的升级历程&#…...

docker 常用指令整理

以下是Docker常用操作指令的整理&#xff0c;分为镜像管理、容器操作、网络配置、数据卷管理、Docker Compose及系统维护等部分&#xff1a; 一、镜像管理 拉取镜像 docker pull [镜像名]:[标签] # 默认标签为latest # 示例&#xff1a;拉取Ubuntu 20.04镜像 docker pull ubun…...

密码格式校验c#和js两种

if (!IsValidPassword(xinmima)) { //在前端校验过了,这里不需要 ClientScript.RegisterStartupScript(GetType(), "", "alert(新密码必须至少8位,且至少包含大写字母、小写字母、数字、特殊符号中的3种)", true); } /// <summary> …...

线程控制

POSIX线程库 与线程有关的函数构成了⼀个完整的系列&#xff0c;绝⼤多数函数的名字都是以“pthread_”打头的要使⽤这些函数库&#xff0c;要通过引入头文件<pthread.h>链接这些线程函数库时要使⽤编译器命令的“-lpthread”选项 eg: g -o $ $^ -lpthread这个pthread库…...

WebView 与 JavaScript 的交互

从技术深度、安全意识 和 实战经验来介绍。以下是分层次的回答策略&#xff0c;从基础到高级逐步深入&#xff1a; 1. 基础实现 回答要点&#xff1a; "Android 和 JavaScript 的交互主要通过 WebView 的两种方式实现&#xff1a; Android 调用 JS&#xff1a; kotlin we…...

解决word中公式大小不一问题

文章目录 前言一、初见端倪二、解决方法三、题外话 前言 记录一下在 word 中使用 mathtype 编辑公式时出现的公式字体大小不一的问题的解决方法。 一、初见端倪 最近在 word 中使用 mathtype 进行公式编辑&#xff0c;刚开始编辑的公式并没有什么问题&#xff0c;过了几天后再…...

Haply与PickNik合作:Inverse3三轴力反馈控制器集成MoveIt Pro,提升机器人操作精度

Haply Robotics与PickNik Robotics合作&#xff0c;将Inverse3力反馈控制器集成到MoveIt Pro平台&#xff0c;优化人机交互&#xff0c;提升机器人操作精度。实时力反馈技术使操作者感知机器人与环境的交互力&#xff0c;增强远程操作的精确度和灵敏度&#xff0c;推动机器人技…...

【Linux笔记】文件的传输(scp、rsync、归档、压缩)

一、sshd 1、概念 在Linux系统中&#xff0c;文件传输常依赖于SSH协议&#xff08;Secure Shell&#xff09;&#xff0c;而sshd&#xff08;OpenSSH Daemon&#xff09;是负责处理SSH连接的后台服务程序。通过sshd&#xff0c;用户可以在加密的通道中进行安全的远程登录、命…...

单位矩阵的特点

《单位矩阵的特性与重要性质》 单位矩阵是一种特殊的方阵&#xff0c;具有以下特点&#xff1a; 主对角线元素全为 1&#xff1a;单位矩阵 I n I_n In​是一个 n n n\times n nn的方阵&#xff0c;其主对角线&#xff08;从左上角到右下角的对角线&#xff09;上的元素均为 …...

AI处理漫画转视频

AI处理漫画转视频 第一步 从漫画PDF文件读取图片 第二部 图片信息剪裁 第三步 OCR识别处理图片&#xff0c;获取漫画对应的文本信息 第四步 运用阿里云通义大模型千文处理提取的文本信息更符合文本语言 第五步 运用FishVideo大模型将文本信息转变为对应的语音 第六步 图片转视…...

三维空间中的离散曲线段匹配方法

基于离散 F r e ˊ c h e t Fr\{e}chet Freˊchet距离实现工程中的三维曲线段匹配 在自动驾驶系统中, 准确匹配相邻车道线是实现安全导航, 变道决策和路径规划的核心任务. 由于道路网络存在交叉口, 弯道, 多车道并行等复杂场景, 如何衡量目标车道曲线与其他候选车道线的空间关…...

HTML的Canvas元素

<Canvas>元素 <Canvas>元素是HTML5引入的一个强大的绘图元素&#xff0c;它允许通过 JavaScript 在网页上动态绘制图形、动画和交互式内容。需要注意的是&#xff0c;<Canvas>元素只是图形的一个容器&#xff0c;绘制图形必须使用Javascript。 空画布 <…...

Django学习记录-2-数据库

Django学习记录-2-数据库 文章目录 Django学习记录-2-数据库参考贴连接数据库后台查看数据库后台改为中文 table增删改查Python使用hash保持一致 虽然网上教程都很多&#xff0c;但是感觉自己记录一下才属于自己&#xff0c;之后想找也方面一点&#xff0c;文采不佳看的不爽可绕…...

qq邮箱群发程序

1.界面设计 1.1 环境配置 在外部工具位置进行配置 1.2 UI界面设计 1.2.1 进入QT的UI设计界面 在pycharm中按顺序点击&#xff0c;进入UI编辑界面&#xff1a; 点击第三步后进入QT的UI设计界面&#xff0c;通过点击按钮进行界面设计&#xff0c;设计后进行保存到当前Pycharm…...

spring mvc 中 RestTemplate 全面详解及示例

RestTemplate 全面详解及示例 1. RestTemplate 简介 定义&#xff1a;Spring 提供的同步 HTTP 客户端&#xff0c;支持多种 HTTP 方法&#xff08;GET/POST/PUT/DELETE 等&#xff09;&#xff0c;用于调用 RESTful API。核心特性&#xff1a; 支持请求头、请求体、URI 参数的…...

openEuler-22.03-LTS-SP3 编译安装 Greenplum-db 6.20.0

openEuler-22.03-LTS-SP3 编译安装 Greenplum-db 6.20.0 1、配置 yum 华为源2、安装依赖3、源码安装 openssl 1.0.1u3.1、openssl 1.1.1 降级到 openssl 1.0.1 4、源码安装 python 2.75、使用 pip3 安装 Python 相关依赖6、编译安装 Greenplum-db 6.20.06.1、修改配置6.2、基于…...

天锐蓝盾多模式加密技术,构筑企业数据安全堡垒

一旦企业发生数据泄露&#xff0c;将遭受严重的经济损失&#xff0c;声誉也会一落千丈&#xff0c;甚至可能在激烈的竞争中陷入绝境。那么&#xff0c;企业究竟该如何守护敏感数据&#xff0c;筑牢数据安全的 “护城河” 呢&#xff1f;天锐蓝盾数据泄露防护系统给出了全面且专…...

可编辑37页PPT | 建筑行业DeepSeek日常实操培训

荐言摘要&#xff1a;随着人工智能技术的快速发展&#xff0c;DeepSeek作为一款具有创新性的AI工具&#xff0c;正逐步渗透到建筑行业的各个环节。为帮助建筑行业从业者掌握DeepSeek的核心功能与应用技巧&#xff0c;提升工作效率与决策能力&#xff0c;特推出本次建筑行业Deep…...

C语言指针和函数

文章目录 C语言指针和函数一、指针与函数1.传递指针给函数2.指针函数3.函数指针4.回调函数 二、多级指针三、空指针四、野指针 C语言指针和函数 在C语言的编程领域中&#xff0c;指针是一把强大而又危险的“双刃剑”。它不仅能够直接操作内存&#xff0c;提升程序的运行效率&a…...

左右开弓策略思路

一、策略概述 本策略是一种基于多种技术指标的复杂交易策略&#xff0c;包括自定义指标计算、过滤平滑处理以及交易信号生成。 该策略通过不同的交易平台代码段实现&#xff0c;旨在通过分析历史价格数据来预测未来价格走势&#xff0c;并据此生成交易信号。 二、主要技术指标…...

mapbox基础,加载F4Map二维地图

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性二、🍀F4Map 简介2.1 ☘️技术特点2.2 ☘️核…...

doxygen自动生成文档,注释容易错位的补充

开发过程中&#xff0c;为了简化api开发文档的编写工作&#xff0c;我们可以使用doxygen的标注来进行文档注释&#xff0c;最后自动化的生成相关文档&#xff1a; 参考&#xff1a;https://developer.aliyun.com/article/935529 参考&#xff1a;https://blog.csdn.net/qq_3459…...

git操作0409

git init git add. git commit -m "Initial commit" git checkout 7890abc # 切换到旧版本代码&#xff08;只读&#xff09; git checkout master # 切回最新版本 git checkout -b new_branch 789abcd # 或 git checkout -b new_branch HEAD~3 很重点 git reflog …...

电阻的额定功率与额定电压详解

一、基本定义 额定功率&#xff08;Rated Power&#xff09; 定义&#xff1a;电阻在长期安全工作时允许消耗的最大功率&#xff0c;超过此值可能导致过热甚至烧毁。 公式&#xff1a; P I R 或 P V / R &#xff08;I&#xff1a;电流&#xff0c;V&#xff1a;电压&#…...

【后端开发】SpringBoot与Spring MVC

文章目录 创建项目目录介绍Spring MVCservletMVCSpring MVCSpringboot与Spring MVC的区别Spring MVC交互 创建项目 新建一个Springboot项目 对应描述 目录介绍 src/main/java&#xff1a;Java 源代码 src/main/resources&#xff1a;为静态资源或配置⽂件&#xff1a; ----…...

如何禁用 PyCharm 的测试功能

如何禁用 PyCharm 的测试功能&#xff1f; PyCharm 的测试功能默认会自动检测项目中符合命名规则的测试文件&#xff08;如以 test_ 开头的文件&#xff09;并关联测试框架。若需禁用该功能&#xff0c;可通过以下方法操作&#xff1a; 方法一&#xff1a;全局禁用默认测试框架…...

【Spiffo】光速项目:LVGL v9框架下的MIPI简易相机_Part2

简介 本期接上回的工程部署讲一下整个工程的框架逻辑以及相关的模块作用机制&#xff0c;包括mipi抓图像以及后续传递到显示屏的链路逻辑等。 一、核心逻辑 1、如何抓到图像数据并显示 首先能够从摄像头捕获画面并显示是一个相机最起码要能实现的功能。所以先要搞清楚整个链…...

pycharm编译部署智能合约(solcx与web3搭配)

solcx 是一个 python 库,提供了 solidity 编译器的 python 绑定。它使开发者能够直接从 python 中编译 solidity 源代码,生成以太坊智能合约的字节码(Bytecode)和 ABI(Application Binary Interface)。这个库通常用于与 Web3 库配合使用,帮助开发者进行智能合约的部署、…...

微信小程序中的openid的作用

微信小程序中的openid的作用 引言 在当今数字化时代&#xff0c;用户体验成为了产品成功与否的关键因素之一。微信小程序作为连接用户与服务的重要桥梁&#xff0c;在提升用户体验方面发挥着重要作用。其中&#xff0c; openid&#xff08;开放身份标识符&#xff09;是微信小…...

AAAI 2025新研究!大语言模型+MARL=论文新思路?

最新研究显示&#xff0c;多智能体强化学习&#xff08;MARL&#xff09;正迎来一系列技术革新&#xff0c;让AI系统真正具备“群体智能”。同济大学团队提出的动态图通信网络&#xff08;TGCNet&#xff09;&#xff0c;通过Transformer建模智能体间的动态协作关系&#xff0c…...

旅行世界宠物养殖合成游戏源码

旅行世界宠物养殖合成游戏源码&#xff0c;游戏养成类系统&#xff0c;用户能够通过养狗和参加其他活动获取算力&#xff0c;每日任务不断更新&#xff0c;完结即可收取算力&#xff0c;算力能够兑换现金红包。 邀请好友得两级活跃收益提成&#xff0c;徒弟B100.%&#xff0c;徒…...

列表之链表_C

数据结构&#xff08;邓俊辉&#xff09;&#xff1a;列表及相关概念_listnodeposi-CSDN博客 #include <stdio.h> #include <stdlib.h>// 定义Rank类型为int typedef int Rank;// 定义ListNode结构体 typedef struct ListNode {int data;struct ListNode* pred;st…...

图解Java设计模式

1、设计模式面试题 2、设计模式的重要性 3、7大设计原则介绍...

CCF GESP Python编程 四级认证真题 2025年3月

Python 四级 2025 年 03 月 题号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 答案 D C B C D C A A D B D A C B C 1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09; 第 1 题 2025年春节有两件轰动全球的事件&#xff0c;一个是DeepSeek横空出世&#xff0c;另一个是…...