Vue組件中的子值更改父值的問題

Question

我有一個用於填充 Dialog Vue 組件的數組。 我有：

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

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

在我的父母身上

       {{basicInfo[0].firstName + ' ' + basicInfo[0].lastName}}

我有一個按鈕，它將調用一個表單組件並打開一個允許編輯的對話框彈出窗口。 我的問題是對對話框的所有更改也會立即顯示在父級上。 我想在子對話框上有一個取消按鈕，因此不會進行任何更改。 我在傳遞數組之前克隆了它：

       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
      },

我的問題是，在進行更改時，我可以看到每個擊鍵，因此如果選擇取消，則無法將 go 恢復為原始狀態。 我是 Vue 和組件的新手，所以我可能完全搞砸了。 為什么要同時對 basicInfo 數組和 newbasicInfo 數組進行更改。

Answer 1

這里發生的是您通過引用復制數組。 因此，當您修改一個數組的索引時，實際上兩者都被修改了，因為它們共享相同的引用。 您需要做的是按值復制數組。

這可以通過這種方式輕松完成： this.newbasicInfo = JSON.parse(JSON.stringify(this.basicInfo));

您可以在 SO 上查看此問題以獲取更多信息： How do you clone an Array of Objects in Javascript？

Answer 2

您的克隆方法不適用於對象數組：

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 = [{ firstName: "John", lastName: "Doe" }] const newbasicInfo1 = basicInfo1.slice() newbasicInfo1[0].firstName = "Johnnyboy" console.log('basicInfo1: ', basicInfo1) console.log('newbasicInfo1: ', newbasicInfo1) const basicInfo2 = [{ firstName: "John", lastName: "Doe" }] const newbasicInfo2 = JSON.parse(JSON.stringify(basicInfo2)) newbasicInfo2[0].firstName = "Johnnyboy" console.log('basicInfo2: ', basicInfo2) console.log('newbasicInfo2: ', newbasicInfo2)