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.rhkb.cn/news/365330.html

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

相关文章

「C++系列」C++ 数据类型

文章目录 一、C 数据类型二、C 数据类型占位与范围三、类型转换1. 隐式类型转换(Automatic Type Conversion)2. 显式类型转换(Explicit Type Conversion)3. 示例代码 四、数据类型案例1. 整型2. 浮点型3. 字符型4. 布尔型5. 枚举类…

《Programming from the Ground Up》阅读笔记:p1-p18

《Programming from the Ground Up》学习第1天,p1-18总结,总计18页。 一、技术总结 1.fetch-execute cycle p9, The CPU reads in instructions from memory one at a time and executes them. This is known as the fetch-execute cycle。 2.genera…

九浅一深Jemalloc5.3.0 -- ①浅*编译调试

目前市面上有不少分析Jemalloc老版本的博文,但5.3.0却少之又少。而且5.3.0的架构与之前的版本也有较大不同,本着“与时俱进”、“由浅入深”的宗旨,我将逐步分析Jemalloc5.3.0的实现。5.3.0的特性请见Releases jemalloc/jemalloc GitHub 另…

fastapi+vue3前后端分离开发第一个案例整理

开发思路 1、使用fastapi开发第一个后端接口 2、使用fastapi解决cors跨域的问题。cors跨域是浏览器的问题,只要使用浏览器,不同IP或者不同端口之间通信,就会存在这个问题。前后端分离是两个服务,端口不一样,所以必须要…

Java单体架构项目_云霄外卖-特殊点

项目介绍: 定位: 专门为餐饮企业(餐厅、饭店)定制的一款软件商品 分为: 管理端:外卖商家使用 用户端(微信小程序):点餐用户使用。 功能架构: &#xff08…

ESP32实现UDP连接——micropython版本

代码: import network import socket import timedef wifiInit(name, port):ap network.WLAN(network.AP_IF) # 创建一个热点ap.config(essidname, authmodenetwork.AUTH_OPEN) # 无需密码ap.active(True) # 激活热点ip ap.ifconfig()[0] # 获取ip地址print(…

【想起就补】整理了一些SSH中常用的命令

希望文章能给到你启发和灵感~ 如果觉得文章对你有帮助的话,点赞 关注 收藏 支持一下博主吧~ 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、常用命令类型2.1 远程登录相关2.2 文件操作命令2.3 权限和所有权操作命令2.4 文…

MT6989(天玑9300)芯片性能参数_MTK联发科5G处理器

MT6989是联发科Dimensity旗舰系列的成员,旨在为旗舰5G智能手机供应商提供最先进的技术和性能。MT6989也是联发科目前最具创新和强大的5G智能手机芯片,具有领先的功耗效率,无与伦比的计算架构,有史以来最快和最稳定的5G调制解调器&…

【操作系统期末速成】 EP04 | 学习笔记(基于五道口一只鸭)

文章目录 一、前言🚀🚀🚀二、正文:☀️☀️☀️2.1 考点七:进程通信2.2 考点八:线程的概念2.3 考点九:处理机调度的概念及原则2.4 考点十:调度方式与调度算法 一、前言🚀…

邀请函 | 极限科技全新搜索引擎 INFINI Pizza 亮相 2024 可信数据库发展大会!

过去一年,在全球 AI 浪潮和国家数据局成立的推动下,数据库产业变革不断、热闹非凡。2024 年,站在中国数字经济产业升级和数据要素市场化建设的时代交汇点上,“2024 可信数据库发展大会” 将于 2024 年 7 月 16-17 日在北京悠唐皇冠…

docker仓库--centos7.9部署harbor详细过程与使用以及常见问题

文章目录 前言1.docker-compose是什么2.harbor是什么 centos7部署harbor详细过程与使用环境一、部署docker二、部署harbor1.下载docker-compose工具2.harbor安装3.拷贝样本文件,并修改文件4.安装harbor,安装完成自行启动5.查看 三、harbor的使用1.创建项…

2024第17届中国西部体育博览会

2024第17届中国西部体育博览会 主办单位: 中国西部教体医融合博览会组委会 承办单位:重庆中博展览有限公司 展会背景: 四川和重庆是教育大省,体育大省。成渝双城经济圈的出台,构建以国内大循环为主体、国内国际双循环…

探索人工智能和LLM对未来就业的影响

近年来,人工智能(AI)迅猛发展,引发了人们的兴奋,同时也引发了人们对就业未来的担忧。大型语言模型(LLM)就是最新的例子。这些强大的人工智能子集经过大量文本数据的训练,以理解和生成…

VMamba: Visual State Space Model论文笔记

文章目录 VMamba: Visual State Space Model摘要引言相关工作Preliminaries方法网络结构2D-Selective-Scan for Vision Data(SS2D) VMamba: Visual State Space Model 论文地址: https://arxiv.org/abs/2401.10166 代码地址: https://github.com/MzeroMiko/VMamba 摘要 卷积神…

Chrome浏览器web调试(js调试、css调试、篡改前置)

目录 1. 打开开发者工具(Dev Tool) 2. 打开命令菜单 截图 3. 面板介绍 4. CSS调试 右键检查快速到达元素处 查找DOM数 利用面板Console查找DOM节点 内置函数查找上一个选择点击的元素 5. 调试JS代码(Javascript调试) 日志调试 选择查看日志等级 眼睛观测变量 …

Vue3学习笔记<->创建第一个vue项目(2)

新建一个项目目录 找一个盘新建一个目录,我这里在D盘创建一个vuedemo目录作为项目存放的目录。使用idea打开目录。   单击ieda底部的按钮“Terminal”,打开命令行窗口,如果命令行窗口当前目录不是“vuedemo”,就切换到“vuedem…

论文阅读:Simple and Efficient Heterogeneous Graph Neural Network

Yang, Xiaocheng, Mingyu Yan, Shirui Pan, Xiaochun Ye and Dongrui Fan. “Simple and Efficient Heterogeneous Graph Neural Network.” AAAI Conference on Artificial Intelligence (2022). 论文地址:[PDF] Simple and Efficient Heterogeneous Graph Neural…

深度学习11-20

1.神经元的个数对结果的影响: (http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html) (1)神经元3个的时候 (2)神经元是10个的时候 神经元个数越多,可能会产生…

uniapp运行到小程序Vue.use注册全局组件不起作用

真想吐槽一下小程序,uniapp运行到小程序使用Vue.use注册全局组件根本不起作用,也不报错,这只是其中一个问题,其他还有很多问题,比如vue中正常使用的没问题的语法,运行到小程序就不行,又是包太大…

uniapp,uni-fab组件拖动属性,替代方案

文章目录 1. 背景2. 替代方案2.1 方案一2.2 方案二 参考 1. 背景 最近基于uniapp开发一款设备参数调试的APP软件,其中有使用到悬浮按钮,快速开发阶段,为了能尽快上线,直接使用了uni-ui的扩展组件uni-fab,参考【1】&am…