时间戳

首页 > 解决方案 > 为什么 vue 子组件会自动更改父组件中的数据？

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

问题描述

我正在尝试这样的事情：

父组件

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

问题是在更改其中的值时会改变父组件中creatEorEditExperience的数据。userExperience可视化问题： 问题截图

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

重点是什么 ？

标签： vue.jsvuejs2vue-component

解决方案

v-model 将输入字段绑定到您要求的数据。通过要求create-or-edit-experience绑定到userExperience，您是在告诉它主动更改存储在该对象中的值。

您可以在子组件中有一个不同的对象来存储临时数据，然后handleEditExperience您可以在userExperience.

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

推荐阅读