Javascript Vue组件的子值更改父值时出现问题

我有一个用于填充对话框Vue组件的数组。我有：

           basicInfo: [{ firstName: "John" , lastName: "Doe" }],

          <basicInfoForm v-model="showBasicInfoForm" :basicInfo="newbasicInfo[0]"></basicInfoForm>

我有一个按钮，可以调用表单组件并打开一个允许编辑的对话框弹出窗口。我的问题是，对对话框的所有更改也会立即显示在父对话框上。我想在子对话框上有一个取消按钮，这样就不会进行任何更改。我在传递数组之前克隆了它：

       this.newbasicInfo = this.basicInfo.slice();

和在子对话框上

      <v-text-field
      v-model="basicInfo.firstName"
      label="First Name"
      class="input-name styled-input"
       ></v-text-field> 

      props: {
      value: Boolean,
      basicInfo: Array
      },

道具：{
值：布尔，
基本信息：数组
},

---

我的问题是，在进行更改时，我可以看到每个关键点笔划，因此如果选择了“取消”，则无法返回到原始笔划。我是Vue和组件的新手，所以我可能会把事情搞砸。为什么同时对basicInfo数组和newbasicInfo数组进行更改。

这里发生的是通过引用复制数组。因此，当您修改一个数组的索引时，实际上两个数组都会被修改，因为它们共享相同的引用。 您需要做的是按值复制数组

这样做很容易：

this.newbasicInfo=JSON.parse（JSON.stringify（this.basicInfo））

您可以检查这个问题，以便了解更多上下文：
这里发生的是您正在通过引用复制数组。因此，当您修改一个数组的索引时，实际上两个数组都会被修改，因为它们共享相同的引用。
您需要做的是按值复制数组

这样做很容易：
this.newbasicInfo=JSON.parse（JSON.stringify（this.basicInfo））

您可以检查此问题，以便了解更多上下文：
您的克隆方法无法处理对象数组：

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = basicInfo.slice()

此方法创建一个“浅拷贝”——这意味着它可以处理数字、字符串等，但不会真正创建对象的克隆。克隆对象以这种方式保留其引用，因此它们实际上与源数组中的对象“相同”

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = JSON.parse(JSON.stringify(basicInfo))

此方法创建一个“深度副本”-它所包含的所有内容都将被克隆，无论嵌套的“深度”有多深

如果您有一个简单值数组，浅拷贝效率更高，但如果数组中有对象，则需要深拷贝

因此，这不是一个Vue问题，而是一个更一般的JavaScript问题

这里有一个小片段来说明区别：


const basicInfo1=[{
名字：“约翰”，
姓：“Doe”
}]
const newbasicInfo1=basicInfo1.slice（）
newbasicInfo1[0]。firstName=“Johnnyboy”
console.log（'basicInfo1:'，basicInfo1）
log（'newbasicInfo1:'，newbasicInfo1）
常数basicInfo2=[{
名字：“约翰”，
姓：“Doe”
}]
const newbasicInfo2=JSON.parse（JSON.stringify（basicInfo2））
newbasicInfo2[0]。firstName=“Johnnyboy”
console.log（'basicInfo2:'，basicInfo2）
console.log（'newbasicInfo2:'，newbasicInfo2）
您的克隆方法不适用于对象数组：

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = basicInfo.slice()

此方法创建一个“浅拷贝”——这意味着它可以处理数字、字符串等，但不会真正创建对象的克隆。克隆对象以这种方式保留其引用，因此它们实际上与源数组中的对象“相同”

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = JSON.parse(JSON.stringify(basicInfo))

此方法创建一个“深度副本”-它所包含的所有内容都将被克隆，无论嵌套的“深度”有多深

如果您有一个简单值数组，浅拷贝效率更高，但如果数组中有对象，则需要深拷贝

因此，这不是一个Vue问题，而是一个更一般的JavaScript问题

这里有一个小片段来说明区别：


const basicInfo1=[{
名字：“约翰”，
姓：“Doe”
}]
const newbasicInfo1=basicInfo1.slice（）
newbasicInfo1[0]。firstName=“Johnnyboy”
console.log（'basicInfo1:'，basicInfo1）
log（'newbasicInfo1:'，newbasicInfo1）
常数basicInfo2=[{
名字：“约翰”，
姓：“Doe”
}]
const newbasicInfo2=JSON.parse（JSON.stringify（basicInfo2））
newbasicInfo2[0]。firstName=“Johnnyboy”
console.log（'basicInfo2:'，basicInfo2）
log（'newbasicInfo2:'，newbasicInfo2）
好例子-谢谢好例子-谢谢