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

Question

在vue.js中，在不更改父数据的情况下编辑prop的正确方法是什么？我的意思是，每当我们在vue.js中将任何属性从父对象传递给子对象时，如果我们在子组件中对该属性进行任何更改，那么更改也将反映在父组件中。

vue.js中有什么方法可以在子代中对传递的属性进行本地复制？

我用谷歌搜索，但是到处都写到我们可以做到这一点。

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

这里给用户传递了一个对象，我正在本地用户中创建它的副本，但是它根本不起作用，本地用户未定义。

您是否遇到过这样的情况，您必须更改子组件中的父属性而不影响父组件的状态，即在子组件中创建自己的副本然后进行编辑？

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

我还读过在vue@2.3.3中的某个地方？当我们想将道具从父亲传递给孩子时，我们需要手动创建本地数据来保存道具，这会使很多无用的工作成为现实。

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

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

但这对我来说也不起作用。我正在将vue cli 3.0.1用于开发目的。

这是我的相同代码。

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

当用户单击“ 查看焦点视图”按钮时，用户将被重定向到以下提到的视图，即实际上是引导程序-模式视图。

在这里，用户可以编辑Name的值，但是由于我在这里将name作为来自aprent组件的属性进行传递，因此在此处进行编辑会导致其在父组件上以及列表视图中也进行更新。

Answer 1

在您的小提琴中，子组件Object.assign()用于创建的副本data，该副本是一组对象。但是，这只会创建一个浅表副本，因此数组元素仍将引用原始实例，从而导致您看到的行为。

深度复制数组的一些解决方案：

• 使用JSON.parse(JSON.stringify(this.data))，它对于字符串和数字对象相当有效：

  data() {
    return {
      local_data: JSON.parse(JSON.stringify(this.data))
    }
  }
  

  （演示1）

• 将对象映射到新对象：

  data() {
    return {
      local_data: this.data.map(x => ({...x}))
    }
  }
  

  （演示2）

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

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

  （演示3）