【发布时间】：2021-06-16 05:28:00
【问题描述】：
我正在尝试这样的事情：
父组件
<template v-else>
<b-card class="d-flex card-shadow">
<b-list-group-item
class="d-flex justify-content-between border-0 pl-0"
v-for="(userExperience, index) in userExperiences"
:key="index"
>
<template>
<p class="mb-0 fs--1 font-weight-600">
{{ userExperience.designation }}
</p>
</template>
<template v-slot:action-buttons>
<div class="d-flex mt-1">
<b-button
variant="link"
class="p-0 my-0 ml-0 no-underline fs--1 mr-3 text-blue font-weight-600"
v-b-modal.edit-experience-modal
@click="selectedExperience = userExperience"
>Edit or add details</b-button
>
</div>
</template>
</summary-container>
</b-list-group-item>
</b-card>
<edit-user-experience :experience="selectedExperience" />
</template>
<script>
export default {
data(){
userExperiences: [], // some data
}
}
</script>
EditUserExperience.vue
<b-modal
id="edit-experience-modal"
title="Edit Experience"
cancelTitle="Discard"
okTitle="Save"
button-size="sm"
hide-header-close
return-focus="false"
@ok="handleEditExperience"
@hide="resetFormData"
>
<create-or-edit-experience-form
v-model="userExperience"
:experience="experience"
:handle-submit="handleEditExperience"
:loading="loading"
/>
</b-modal>
问题是在更改creatEorEditExperience 中的值时，它会改变父组件中userExperience 中的数据。可视化问题：
当我尝试更改1 中的数据时，它会自动更改2 中的数据。
有什么意义？
【问题讨论】：
-
这就是
v-model所做的：双向绑定。如果您有两个（或更多）孩子，并且您将它们全部连接到父母中的同一属性，则从一个孩子更改它也会改变其他孩子。要将它们分开，您必须将每个孩子连接到不同的父道具。在这种情况下，首选解决方案是将 parent 中的 prop 作为数组，保存所有子 props 的值。当改变一个孩子的值时，它只会更新父数组中的那个位置，而其余的保持不变。 -
但在这里我没有直接更改父数组。我将数组中的元素处理为一个新变量，然后将该变量作为道具传递给子组件。但是，子组件如何改变数组？ @tao
-
您似乎还不清楚“双向绑定” 是什么意思。孩子没有得到父母财产的副本。它获取对父属性的引用。当您更改子属性时，您实际上是在更改父属性。当您更改父属性时，它会在使用它的任何地方发生变化。在您的情况下，它在每个子实例中都会发生变化，因为通过使用
v-model您将它传递给每个子实例。不是它的副本。它。父属性“实例”，我们应该称之为。 -
知道了。你能用一些演示代码回答这个问题吗？
-
您发布的代码不足以创建 runnable minimal reproducible example。使用codesanbox.io或类似的创建一个，我会为你修改它。
标签： vue.js vuejs2 vue-component