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

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.kler.cn/a/542828.html

相关文章:

  • oracle执行grant授权sql被阻塞问题处理
  • PyQt学习记录01——加法计算器
  • qt QCommandLineOption 详解
  • 《optee系统架构从入门到精通》
  • 一种非完全图下的TSP求解算法
  • ASP.NET Core 如何使用 C# 从端点发出 GET 请求
  • deepseek:三个月备考高级系统架构师
  • 【并发控制、更新、版本控制】.NET开源ORM框架 SqlSugar 系列
  • ASP.NET Core DDD
  • C++多态性之重载多态(二)—学习记录
  • 图像处理篇---基本Python图像处理
  • Linux查看硬件常用命令
  • 美​团​一​二​面​​东​方​财​富​一​面
  • 设计模式(一):设计原则、常用设计模式
  • 键盘启用触摸板-tips
  • YOLO11改进-模块-引入基于局部重要性的注意力机制Local Importance-based Attention LIA
  • redis底层数据结构——简单动态字符串
  • redis中的hash结构
  • DeepSeek-R1技术革命:用强化学习重塑大语言模型的推理能力
  • ES6 Proxy 用法总结以及 Object.defineProperty用法区别
  • ubuntu使用防火墙开放和关闭指定端口
  • Redis 基本全局命令和单线程架构
  • 激活函数 05 ——Swish
  • 二、通义灵码插件保姆级教学-IDEA(使用篇)
  • jenkins备份还原配置文件
  • PHP的JIT编译器