子组件使用父组件传进来的值，子组件修改值感染父组件的值问题解决

 

问题描述

 在开发中遇到了一个问题，将父组件的一个对象传给了子组件，在子组件操作该对象时，父组件的数据也受到了影响，这不是我所希望的

例如下图，编辑未保存时，子组件编辑中修改值会将父组件中的值给修改掉

---

原因分析：

在 vue 中需要遵循单向数据流原则，props 是单项绑定的
当父组件的属性变化时，会传给子组件，但是子组件原则上是不可以修改传过来的值的。这是为了防止子组件无意修改了父组件的状态。

但是既然这样，我们为什么会遇到这种问题呢，这是因为：

props 的类型为基本数据类型时，子组件不能改变父组件的值
props 的类型为引用数据类型时，子组件是可以改变父组件的值的
为什么呢？

基本数据类型存储在栈中
引用数据类型存储在堆中
props 的传递是将数据浅拷贝下来，拷贝的引用数据类型其实指向对一个对象，拷贝在栈中，内容还是指向同一个堆地址，而基本数据类型本身就是在栈中，就会全部拷贝下来

当在子组件中改变基本数据类型时，父组件中的值不会改变，但是当改变引用类型数据时，因为父组件和子组件中的 props 保存的引用类型数据的地址时一样的，对应地址的值也一起改变

对引用数据类型而言：
浅拷贝相当于投屏,电脑屏幕使用的不一样,思维是一样的两者同步操作
深拷贝相当于双胞胎，长得一样，但是性格思想行为不一样

---

解决方案：

1. 单独（基本数据类型）赋值，不赋值对象（引用数据类型）
2. 使用JSON.parse(JSON.stringify(data)) 处理数据
3. 其他深拷贝方法处理数据
   1. 可以给对象重新赋值：(给对象里的每一项重新赋值)
   2. 可以使用ES6提供的Object.assign({}, prop)的返回值就是一个全新的对象

可以使用ES6提供的Object.assign({}, prop)的返回值就是一个全新的对象，操作这个新对象不会影响旧对象。如果不用ES6就自己递归实现拷贝器

这样就会返回一个全新的对象，使用这个对象就不会感染到父组件传入的值
const object = Object.assign({}, this.editData)