目录

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

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

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

拷贝父组件的值:

javascript 复制代码
this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))

调用父组件方法:

复制代码
this.$emit('changeData', this.targetData)

父组件的方法:

复制代码
changeData(val) {
      this.targetChanged = val;
},
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
前端大卫1 小时前
超简单!3 步搭建免费个人 Blog!【附源码】
vue.js·vitepress·前端工程化
申小兮1 小时前
Vue Router
前端·vue.js·vue-router
Java陈序员2 小时前
邻家小铺!一个基于 SpringBoot 和 Vue 的商城系统!
vue.js·spring boot·mysql
爱敲代码的小生2 小时前
Es6--ECMAScript 新增语法
前端·javascript·vue.js
Michael.Scofield2 小时前
vue-axios跨域问题
前端·javascript·vue.js
苹果酱05672 小时前
KisFlow-Golang流式实时计算案例(四)-KisFlow在消息队列MQ中的应用
java·vue.js·spring boot·mysql·课程设计
zru_96022 小时前
Vue 常用组件介绍博客
前端·javascript·vue.js
勘察加熊人4 小时前
vue猜词游戏
前端·vue.js·游戏
我是哈哈hh4 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础