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.ppmy.cn/server/105420.html

相关文章

探索HarmonyOS中的列表组件及其自定义特性

在现代移动应用中,List组件是数据列表的关键元素。HarmonyOS中的List组件不仅具备传统的列表功能,还提供了丰富的自定义选项,允许开发者根据需求灵活调整列表的行为和外观展示。本文将探讨HarmonyOS中列举组件的自定义特性,包括自…

【LeetCode每日一题】——301.删除无效的括号

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 困难 三【题目编号】 301.删除无效的括号 四【题目描述】 给…

C#面:ASP.NET MVC 中如何用表单认证?

在 ASP.NET MVC 中,可以使用表单认证来验证用户的身份。 表单认证是一种基于 Cookie 的认证方式,它通过在用户登录成功后生成一个包含用户身份信息的加密 Cookie,并将该 Cookie 发送给客户端保存。 当用户发送请求时,服务器会验…

19.缓存的认识和基本使用

缓存介绍 缓存是数据交换的缓冲区Cache,是临时存储数据的地方,一般读写性能较高。 数据库的缓存就是建立索引。 缓存的作用 1.降低后端负载。 2.提高读写效率,降低响应时间。 缓存的问题 1.保证数据的一致性。 2.增加代码维护成本。解…

iOS 开发:Object-C 和 Swift 的区别 (AI问答)

一:语言类型的区别(最主要区别) object-c 是动态类型语言; swift是静态类型语言; 看一下AI的回答,很全面~~ Objective-C 和 Swift 的语言类型区别主要体现在以下几个方面: 1. 静态类型 vs. 动…

如何选择最佳路线?

交通线路的选择 日常交通线路的选择,并不是按最短路径选择的。还要参考道路的等级,道路是否拥堵,道路通行速度等多种情形。本程序列举出所有能通行的线路,并计算出行驶距离,来供用户选择。当然,也可以加入…

机械学习—零基础学习日志(如何理解概率论7)

这里需要先理解伯努利试验。只有A与A逆,两种结果。 正态分布 再来一道习题~: 解析: 《概率论与数理统计期末不挂科|考研零基础入门4小时完整版(王志超)》学习笔记 王志超老师 (UP主)

有了孩子后,你需要知道的家庭教育知识

和程序员一样,做合格的父母也需要学习和经验。 家庭是孩子的第一个课堂,父母是孩子的第一任老师。 家庭教育做什么? 父母应该承担哪些家庭教育?《家庭教育促进法》对此做了明确规定:所谓家庭教育,是指父母…

Go语言标准错误error解析

错误类型 errorString 错误是程序中处理逻辑和系统稳定新的重要组成部分。在go语言中内置错误如下: // The error built-in interface type is the conventional interface for // representing an error condition, with the nil value representing no error. …

如何在 Ubuntu 系统中安装PyCharm集成开发环境?

在上一篇文章中,我们探讨了Jupyter notebook,今天再来看看另一款常用的Python 工具,Pycharm。 PyCharm也是我们日常开发和学习常用的Python 集成开发环境 (IDE),由 JetBrains 开发。 PyCharm 带有一整套可以帮助用户在使用Pytho…

Python爬虫,爬取某网站小说

代码仅供学习研究,请勿非法使用! #!/usr/bin/env python3 # -*- coding: utf-8 -*- # Time : 2024/8/23 12:41 # Author : 何胜金-heshengjin # Site : # File : http_test.py # Software: PyCharm """ 虚拟virtualenv pip in…

推荐好古文《马说》

韩愈 世有伯乐,然后有千里马。千里马常有,而伯乐不常有。故虽有名马,只辱于奴隶人之手,骈死于槽枥之间,不以千里称也。 马之千里者,一食或尽粟一石。食马者不知其能千里而食也。是马也,虽有千…

GNN的理解难点:一种不同于传统神经网络的复杂性

图神经网络(GNN)已经成为深度学习领域的一颗新星,它在处理图形数据方面显示出了巨大的潜力和优势。然而,许多研究者和开发者发现GNN比传统的神经网络更难以理解和掌握。本文将探讨GNN的理解难点,以及它与传统神经网络在…

linux memory cgroup的memory.move_charge_at_immigrate含义

1.内核文档 上面的例子说明: 最开始某个进程是在cgroup A中,后面要迁移到cgroup B中,那么进程的内存计数是否要完全迁入B中,就是通过memory.move_charge_at_immigrate控制,如果目标cgroup也就是B设置了1到该字段中&am…

美国RAKsmart大带宽服务器机房要求

RAKsmart是一家提供多种服务器托管和服务解决方案的公司,以其在美国的大带宽服务器闻名。这些服务器通常位于符合高标准的数据中心,如位于美国加州的机房,这些机房具有先进的基础设施和技术支持,以满足用户对于高性能、低延迟的需…

问题记录:/bin/bash^M: 解释器错误:没有那个文件或目录(bad interpreter: No such file or directiry)

问题描述 运行脚本时报错如下: /bin/bash^M: 解释器错误:没有那个文件或目录(bad interpreter: No such file or directiry) 原因分析 脚本文件在windows下编辑过,windows下行结尾是\n\r,而Linux下则是\…

探索Swift的精髓:玩转Swift标准库

标题:探索Swift的精髓:玩转Swift标准库 Swift语言以其简洁、强大和安全著称,而其标准库(Swift Standard Library)是这一语言的核心组成部分。标准库提供了一系列的基础功能,包括集合、字符串处理、数值类型…

微服务的拆分原则及案例分析

1. 引言 随着云计算和大数据技术的发展,微服务架构成为了构建分布式系统的一种重要方式。微服务架构通过将一个大型应用系统拆分成多个小的独立服务来提高系统的可扩展性和灵活性。如何合理地进行微服务的拆分是一个关键的问题。本文将介绍微服务的拆分原则&#x…

如何使用python脚本爬取微信公众号文章?

1、什么是爬虫? 在座的各位可能经常听到一个词,叫“爬虫”,这是一种能够悄无声息地将网站数据下载至本地设备的程序。利用爬虫,您无需亲自访问特定网站,逐个点击并手动下载所需数据。相反,爬虫能够全自动地…

使用canal增量同步ES索引库数据

Canal增量数据同步利器 Canal介绍 canal主要用途是基于 MySQL 数据库增量日志解析,并能提供增量数据订阅和消费,应用场景十分丰富。 github地址:https://github.com/alibaba/canal 版本下载地址:https://github.com/alibaba/c…