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

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;
},

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • WPF—Triggers触发器
  • Linux驱动开发基础(SR501人体红外模块)
  • HashMap 的实现原理
  • CSS3动画——飞行的小精灵
  • webpark 如何将本地访问地址http://localshot:3000修改为自己需要的访问地址https://www.example.com:3000
  • 【ES6】使用Proxy实现单例模式
  • 论文阅读:scMGCA----模型方法
  • Go语言Time包的使用
  • C. Propagating tree
  • HTML5 浏览器支持
  • XML CSS:结构和样式的完美结合
  • 秋招突击——8/16——字节广告业务——面经整理——二面挂
  • 【docker compose 部署和 go 热部署工具fresh】
  • git rebase和git merge的区别
  • EazyDraw for Mac 矢量图绘制设计软件
  • [译]前端离线指南(上)
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • 10个最佳ES6特性 ES7与ES8的特性
  • express.js的介绍及使用
  • JavaScript-Array类型
  • js面向对象
  • rc-form之最单纯情况
  • Selenium实战教程系列(二)---元素定位
  • Transformer-XL: Unleashing the Potential of Attention Models
  • Vue.js-Day01
  • 动态魔术使用DBMS_SQL
  • 关于使用markdown的方法(引自CSDN教程)
  • 和 || 运算
  • 简单基于spring的redis配置(单机和集群模式)
  • 看域名解析域名安全对SEO的影响
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 三分钟教你同步 Visual Studio Code 设置
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 学习Vue.js的五个小例子
  • 原生JS动态加载JS、CSS文件及代码脚本
  • 自定义函数
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​​​【收录 Hello 算法】9.4 小结
  • ​人工智能书单(数学基础篇)
  • ​十个常见的 Python 脚本 (详细介绍 + 代码举例)
  • ​数据结构之初始二叉树(3)
  • (1)无线电失控保护(二)
  • (3) cmake编译多个cpp文件
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (Windows环境)FFMPEG编译,包含编译x264以及x265
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (全注解开发)学习Spring-MVC的第三天
  • (生成器)yield与(迭代器)generator
  • (转)负载均衡,回话保持,cookie
  • (转)一些感悟
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .Mobi域名介绍
  • .NET Core 2.1路线图
  • .NET Core MongoDB数据仓储和工作单元模式封装