Vue解决父子组件传值,子组件改变值后父组件的值也改变的问题

vue开发过程中,父组件通过props传值给子组件,子组件在页面展示父组件的值,在操作子组件值以后,即使不点击确定按钮,父组件中的值也发生了变化,但是需求是操作子组件数据以后,必须点击"确定"按钮以后才能修改父组件的值,否则父组件和子组件的值都不可以变化。

为了解决这一问题,当父组件传值给子组件以后,我通过JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝,然后赋值给子组件中this.targetdData,子组件操作也是改变的this.targetData的值,而不会改变父组件的值,当点击"确定"按钮时,通过$emit调用父组件中的函数,将修改后的this.targetData值给了父组件,修改父组件中的值,当再次进入子组件的时候,会重新把修改后的值拷贝给子组件进行展示就可以解决上述问题了。

拷贝父组件的值:

this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))

调用父组件方法:

this.$emit('changeData', this.targetData)

父组件的方法:

changeData(val) {this.targetChanged = val;
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/37292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 中 MessageBox 定时关闭

C# 中 MessageBox 定时关闭 WPF中 System.Windows.Forms 的 MessageBox 并未提供定时关闭的功能,所以要实现此目标,需添加一些其他代码,如定时监控等。 需求说明: 弹出提示框后若一定时间内未点击此提示框,则其自动…

【信息系统项目管理师知识点速记】项目管理实践模型

20.5 项目管理实践模型 随着项目管理理论和实践在全球范围内的不断发展和积累,多个组织开发并发布了项目管理的最佳实践集合,其中得到广泛使用的是CMMI模型和PRINCE2模型,用于指导各个领域组织的项目管理活动。利用CMMI模型和PRINCE2模型的最佳实践,能够迅速将项目管理者的…

【AI提升】AI利器Tool Call/Function Call(一):langchain+ollama+llama3/qwen2

1、使用AI的一个常用场景就是,接收人类的语言,识别人类的意图,最终进行相关的业务处理,这就是设计Tool Call / Function Call的初衷。 2、现在一般都说Tool Call,以前常叫Function Call,不要纠结。 一、安…

探索 .NET 基准测试库(BenchmarkDotNet)

基准测试是软件开发中的一项重要实践,它允许开发人员测量和比较不同代码段的性能。在 .NET 中,最流行的基准测试库之一是 BenchmarkDotNet。这里将介绍 BenchmarkDotNet,解释它为何必不可少,并提供分步示例来帮助您入门。 什么是…

程序猿大战Python——实现简单的图书馆系统操作

步骤1:安装和导入库 首先,确保已经安装了 pymysql 库。如果没有安装,请执行以下命令: pip install pymysql 然后,导入必要的库: import pymysql 步骤2:创建数据库和表的函数 编写一个函数来…

MySQL 重要参数优化

max_connections = 3000 innodb_buffer_pool_size = 8G max_allowed_packet = 32M innodb_file_io_threads = 8 innodb_thread_concurrency = 16 innodb_flush_log_at_trx_commit = 2 innodb_log_buffer_size = 16M 参数说明 max_connections = 3000 运行MySQL的最大连…

2-19 基于matlab的薄板弯曲的算例

基于matlab的薄板弯曲的算例,利用有限元方法编制matlab程序。对二维薄板进行单元化,输出薄板结构参数及载荷,输出弯曲情况,并可视化展示。程序已调通,可直接运行。 2-19 薄板弯曲 有限元方法 薄板结构参数 - 小红书 (x…

阿里web前端面试-笔试题

面试中遇到的笔试题,记录一下~ 题目: 1.写一个方法,统计字符串中出现的字母及出现次数。 比如:入参abcAAAabc 返回:a:2,b:2,c:2,A:3(示形式不限,但是结果中要能清晰感知出现字母及出现的次数…

odoo17 在线聊天报错提示 Couldn‘t bind the websocket...

在17版本中,使用在线聊天功能时,发现有报错 Couldnt bind the websocket. Is the connection opened on the evented port 8072在跟踪代码后,发现在 odoo-17.0\addons\bus\websocket.py 836 行在linux有差异 进行修改优化 修改前 socket …

福昕阅读器再打开PDF文件时,总是单页显示,如何设置打开后就自动显示单页连续的模式呢

希望默认进入连续模式 设置方法 参考链接 如何设置使福昕阅读器每次启动时不是阅读模式 每次启动后都要退出阅读模式 麻烦_百度知道 (baidu.com)https://zhidao.baidu.com/question/346796551.html#:~:text%E5%9C%A8%E3%80%90%E5%B7%A5%E5%85%B7%E3%80%91%E9%87%8C%E6%9C%89%E…

等保测评练习卷14

等级保护初级测评师试题14 姓名: 成绩: 判断题(10110分) 1. 方案编制活动中测评对象确定、测评指…

Unity+OpenCV+Dlib实现换脸+图片生成+上传服务器+生成二维码[纯干货]

UnityOpenCVDlib实现换脸图片生成上传服务器生成二维码 功能描述 一句话描述:让游客体验一下当宇航员的乐趣。 具体功能:游客通过摄像头拍照,生成有着“自己的脸”的宇航员的图片,然后展示二维码,供游客下载。 效果…

Python学习笔记五

1.当循环执行完整后&#xff0c;就会执行else里面的代码 s0 i1 while i<100:sii1 else:print(s) 当循环不完整就会如下 s0 i1 while i<100:sii1if s6:break; else:print(s) 2. 实现密码匹配&#xff0c;可以输入三次&#xff0c;若输入三次错误会退出&#xff0c;或者输…

部分力扣题记

1.. - 力扣&#xff08;LeetCode&#xff09; 这题用到了map和栈的知识点 我们利用map的特性&#xff0c;将&#xff08;&#xff09;【】{}&#xff0c;分别一一对应 然后遍历&#xff0c;如果map&#xff08;char&#xff09;为真&#xff0c;就意味着是左边的部分&#x…

界面组件DevExpress WinForms v24.1 - 支持DateOnly TimeOnly类型

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

1976 ssm 营地管理系统开发mysql数据库web结构java编程计算机网页源码Myeclipse项目

一、源码特点 ssm 营地管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开…

Pycharm一些问题解决办法

研究生期间遇到关于Pycharm一些问题报错以及解决办法的汇总 ModuleNotFoundError: No module named sklearn’ 安装机器学习库&#xff0c;需要注意报错的sklearn是scikit-learn缩写。 pip install scikit-learnPyCharm 导包提示 unresolved reference 描述&#xff1a;模块…

网络爬虫的架构

网络爬虫的架构 网络爬虫的架构&#xff0c;犹如一座精心设计的桥梁&#xff0c;连接着海量的互联网数据与我们的需求。在网络爬虫的世界里&#xff0c;每一个组件都扮演着至关重要的角色&#xff0c;它们协同工作&#xff0c;确保数据的高效获取与处理。 在爬虫架构的顶层&a…

时序(流式)图谱数据仓库AbutionGraph功能介绍-Streaming Graph OLAM Database

AbutionGraph是一款端到端的流式数据实时分析的图谱数据库&#xff0c;实时&#xff08;流式写入实时、高QPS决策分析实时、流式预处理实时&#xff09;表现在&#xff1a; 构建实时查询QPS响应时长与历史数据量无关的图模型&#xff1b;接入流式数据并实时更新图计算指标&…

Spring Cloud Consul作为配置中心实践

官网地址&#xff1a;https://docs.spring.io/spring-cloud-consul/docs/current/reference/html/#spring-cloud-consul-config 先说个人总结&#xff1a;作为配置中心对比config、Consul以及Nacos后&#xff0c;建议使用 Nacos。 Consul 提供了一个键/值存储用于保存配置和其…