vue-中父组件传个子组件的值,会随着子组件的修改,进行改变问题处理(开发中所遇问题)

在项目中,由于使用引用数据类型进行父子组件间的值传递,导致子组件未确认修改时父组件数据已变更。原因是JavaScript的浅拷贝特性。解决方法是通过深拷贝,如使用lodash的cloneDeep或JSON.parse(JSON.stringify())来避免这个问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在项目中遇到一个比较稀奇的事情,当我先描述下,我使用了一个组件,组件里面值的改变在点击确定之后需要带会到父组件中,并且在点击打开组件的时候要求内容回显,这时我就将数据通过父子传值的方式给子组件传值,当我改变子组件值,还没有点击确定时,父组件的数据也发生了改变,后来发现这是由于所传的值是引用数据类型的原因,当然我们使用基本数据类型的时候,就不会发生这件事儿了。

原因:因为父子之间的复杂数据类型(引用数据类型)的传值,只是浅拷贝,简单来说就是将复杂数据类型的存储的地址传给了子组件,所以子组件中的值改变,父组件中传给子组件的那个值也会跟着发生改变。

解决方法:通过上面我们知道需要通过深拷贝的方式将数据传个子组件,这样的事情就不会发生了,我们可以使用lodash的clonedeep。也可以使用以下方式

JSON.parse(JSON.stringify(所传数据)) // 这个是我使用的方式

就可以解决问题了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值