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

在vue.js中，在不更改父数据的情况下编辑道具的正确方法是什么？ 我的意思是，每当我们在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进行developerNT开发

这是我的代码

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

当用户点击查看聚焦视图按钮时，用户被重定向到下面提到的视图，即实际上是一个引导模式视图

在这里，用户可以编辑Name的值，但由于我将Name作为一个属性从一个ent组件传递到这里，所以在这里编辑它会导致它在父组件上更新，也就是在列表视图中更新。

在您的中，子组件用于创建数据的副本，这是一个对象数组。但是，这只会创建一个数组，因此数组元素仍然会引用原始实例，从而导致您看到的行为

深度复制阵列的几种解决方案：

• 使用，这对字符串和数字对象相当有效：

  data（）{
  返回{
  本地_数据：JSON.parse（JSON.stringify（this.data））
  }
  }
  

  （）

• 将对象映射到新对象中，如果深度仅为1，则效果良好（嵌套数组/对象仍将被浅复制）：

  data（）{
  返回{
  本地_数据：this.data.map（x=>（{…x}））
  }
  }
  

  （）

• 使用实用程序库，例如

  lodash

  ：

  data（）{
  返回{
  本地_数据：u.cloneDeep（this.data）
  }
  }
  

  （）

---

除此之外，我已经尝试过这个{this.localUser=Object.assign（{}，this.user）}和这个以及这个.localUser=JSON.parse（JSON.stringify（this.user）），甚至我也尝试过lodash.\u clone，尽管我已经通过将输入绑定到data（）{x:null}中的局部变量并绑定@input=“x”解决了这个问题然后调用2个函数set和unset，其中一个函数将编辑后的值设置为原始值，另一个函数使用

对象将其设置为x.@DivyanshuRawat。分配

，如图所示应该可以工作。@tony19嘿，谢谢，你是对的，但请注意，当你从app.vue主状态的json文件加载数据时，你的解决方案不成立，更多信息。请看回购协议我可能错了，但请纠正我。@tony19你可以跟随这把小提琴，以便于访问-这是一个很好的解释，我需要在几个小时后不知道在哪里。这非常有帮助，我喜欢多个例子。演示1对数组中的日期对象有任何问题吗？@CaineNielsen

JSON。stringify

会将

date

对象转换为

String

（通过

date#toString

），所以它们必须是。答案很好，但请注意，“演示2”不那么肤浅，但仍然是一个肤浅的副本（深度1）

this.data.map（x=>（{…x}））

-如果数组中包含带有对象或数组的对象，则这些对象将是浅层副本。@TomCarchrae说得对。在解决方案中添加了警告。