为什么vue子组件会自动更改父组件中的数据？

Question

我正在尝试这样的事情：

父组件

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

编辑用户体验。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>

当我尝试更改1中的数据时，它会自动更改2中的数据。

有什么意义？

Answer 1

v-model将输入字段绑定到您请求的数据。通过要求创建或编辑体验绑定到用户体验，您告诉它主动更改存储在该对象中的值。

您可以在子组件中使用不同的对象来存储临时数据，然后在handleedExperience中，您可以在userExperience中更改数据。

它目前的工作方式是v-Model的预期行为

Answer 2

正如我所料，你有不止一个问题。

慢慢来，把你的沙箱和我下面链接的沙箱进行比较。此外，如果要求不太多，请保持当前状态（如果您想做进一步的更改，请使用fork）。将您所做的与我所做的进行比较，可能会对将来遇到类似问题的用户有所帮助。

我尽可能多地去除浮肿。要完全理解它，请阅读自定义事件（特别是.sync修改器）。还要通过计算机设置程序。

重要提示：内部EditUserExperience。vue，您会注意到我正在将experience扩展到一个名为userExperience的计算程序中。我这样做是为了打破反应性。如果我通过体验直接进入

在这里：https://codesandbox.io/s/two-way-binding-forked-9ewdc