在 vue.js 的 child 组件中创建传递的道具的本地副本？

Question

在 vue.js 中，在不更改 parent 数据的情况下编辑道具的正确方法是什么？我的意思是，每当我们将任何属性从 parent 传递到 vue.js 中的 child 时，如果我们对 [=52 中的属性进行任何更改=] 组件然后更改也反映在 parent 的组件中。

在 vue.js 中是否有任何方法可以在 child 中制作已通过的属性的本地副本？

我用谷歌搜索了这个，但到处都写着我们可以通过这样做来实现。

 props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }

此处向用户传递了一个 object，我正在本地用户中创建它的副本，但它根本不起作用，本地用户未定义。

您是否遇到过这样的情况，您必须在 child 组件中更改 parent 属性而不影响 parent 组件的状态，即 -在 child 中制作自己的副本然后编辑它？

对此的任何见解都会有所帮助。

我也看过某处，在vue@2.3.3中，当我们想从Father传递一个prop到Child组件时，我们需要手动创建一个本地数据来保存prop，即做了很多无用的作品。

我们可以像这样手动创建本地数据：

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

但这也不适用于我的情况。我正在使用 vue cli 3.0.1 进行开发。

这是我的代码。

在我的应用程序中，我有一个列表视图。

当用户点击 See Focused View 按钮时，用户将被重定向到下面提到的视图，即实际上是一个 bootstrap - 模态视图。

在这里用户可以编辑名称的值，但是因为我在这里将名称作为属性从一个组件传递，所以在这里编辑它会导致它在 parent 组件上更新，即在列表视图也是如此。

Answer 1

在您的 fiddle, the child component is using Object.assign() to create a copy of data, which is an array of objects. However, this only creates a shallow copy 中，数组元素仍将引用原始实例，从而导致您所看到的行为。

深拷贝数组的几种解决方法：

使用 JSON.parse(JSON.stringify(this.data)), which works reasonably well for primitive 对象属性（String、Number、BigInt、Boolean、undefined 和null):
```
data() {
  return {
    local_data: JSON.parse(JSON.stringify(this.data))
  }
}
```
(demo 1)
将对象映射成新对象，如果深度只有1，效果很好（嵌套arrays/objects仍然会被浅复制）：
```
data() {
  return {
    local_data: this.data.map(x => ({...x}))
  }
}
```
(demo 2)

使用实用程序库，例如 lodash 的 cloneDeep:

data() {
  return {
    local_data: _.cloneDeep(this.data)
  }
}

(demo 3)

在 vue.js 的 child 组件中创建传递的道具的本地副本？

Creating local copy of passed props in child component in vue.js?

deep-copy

vue.js

vue-component

vuejs2

vue-cli