vue父子组件传值的时候涉及双向绑定,即父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变,第一次遇到这样的问题时,想了很多,却忘记了双向绑定,谨记。

父子组件之间是双向绑定

当传值为object类型时,传值之后数据源会被改变,解决办法如下:

深拷贝和浅拷贝

1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用

2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”

首推的方法简单有效,JSON.stringfy()和JSON.parse()即可搞定。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略。。。所以,对象值有这三种的话用这种方法会导致属性丢失。

另外Object.assgin(), 数组的slice()这些,这些只深复制了基本类型数据类型,不是真正意义的深复制,当然,如果要复制的对象或者数组都是简单数据类型,那就大胆用吧。

最好的解决办法是:

传值的时候不要直接传数据源,而且经过拷贝或者定义新变量等。

Logo

前往低代码交流专区

更多推荐