vue2子组件拷贝父组件传递的参数

在 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版本中被引入。这也被称为"浅复制"，因为它只复制对象的第一层属性，而不是所有嵌套的属性。这意味着如果你的对象有嵌套的对象或数组，那么新的复制对象和原始对象将共享这些嵌套的对象或数组。