在 Vue2 中，父组件向子组件传递参数时，如果参数是对象或数组（即非基本数据类型），那么子组件可以直接修改这个参数，这会影响到父组件的数据。如果你想避免这种情况，你可以让子组件对父组件的传参进行深度拷贝。这样，子组件就可以自由修改拷贝后的参数，而不会影响到父组件的数据。
这是一个例子，假设父组件向子组件传递一个对象类型的参数 obj
<!-- 父组件 -->
<template>
<div>
<child :obj="parentObj"></child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
parentObj: { a: 1, b: 2 },
};
},
components: {
Child,
},
};
</script>
子组件可以这样进行深度拷贝：
<!-- 子组件 -->
<template>
<div>
<!-- 在这里使用 copyOfObj，而不是直接使用 obj -->
</div>
</template>
<script>
export default {
props: {
obj: {
type: Object,
required: true,
},
},
data() {
return {
// 使用 JSON 方法进行深度拷贝
copyOfObj: JSON.parse(JSON.stringify(this.obj)),
};
},
};
</script>
注意这里使用了 JSON.parse(JSON.stringify(this.obj)) 来进行深度拷贝。这种方法简单易用，但它有一些限制，比如它不能拷贝函数。如果你的对象中包含函数，你可能需要使用其他库，比如 lodash 的 _.cloneDeep 方法，来进行深度拷贝。
浅拷贝：
在Vue中，let copyObject = {...object}这种写法被称为对象扩展或对象解构。它是一种创建新对象并将旧对象属性复制到新对象的方式。用这种方法复制对象不会影响原始对象，因为新的对象有自己的内存空间。
这种写法在JavaScript ES6版本中被引入。这也被称为"浅复制"，因为它只复制对象的第一层属性，而不是所有嵌套的属性。这意味着如果你的对象有嵌套的对象或数组，那么新的复制对象和原始对象将共享这些嵌套的对象或数组。