javascript - VueJS中如何防止Child组件中更新的数据更新Parent的数据[2.6.14]

问题描述

我正在使用 vuejs 2.6.14 并遇到以下问题：

来自子组件的修改数据也会更新父组件中的数据，而无需在代码中使用 $emit。

这与通常的“如何从父级更新子级数据/如何从子级更新父级数据”相反

这是我更详细的代码：

我有一个名为 Testing.vue 的父组件，将 JSON 对象（“userData”）传递给子组件 GeneralData.vue。

这是父代码的样子：

<template>
  <div id="testing-compo">
    <div style="margin-top: 1rem; margin-bottom: 1rem; max-width: 15rem">
          <label
            class="sr-only"
            for="inline-form-input-username"
            style="margin-top: 1rem; margin-bottom: 1rem"
            >Account settings for :</label
          >
          <b-form-input
            v-model="username"
            id="inline-form-input-username"
            placeholder="Username"
            :state="usernameIsValid"
          ></b-form-input>
        </div>
    <b-button class="button" variant="outline-primary" 
    @click="callFakeUser">
    Populate fake user
    </b-button>
    <GeneralData :userData="user" />
  </div>
</template>
<script>
export default {
  name: "Testing",
  components: {
    GeneralData,
  },
  data() {
    return {
      user: null,
      username: null,
    };
  },
  computed: {
    usernameIsValid: function () {
      if (this.username != null && this.username.length >= 4) {
        return true;
      } else if (this.username != null) {
        return false;
      }

      return null;
    },
  },
  methods: {
    async callFakeUser() {
      userServices.getFakeUser().then((res) => {
        this.user = res;
        console.log(this.user);
      });
    },
</script>

一个非常简单的调用 userServices.getFakeUser() 的测试组件，它异步返回一个 JSON 对象。

对于孩子：

<template>
  <div id="general-compo">
    <!-- AGE -->
    <div class="mt-2">
      <label for="text-age">Age</label>
      <div>
        <b-form-input
          v-model="userAge"
          placeholder="+18 only"
          class="w-25 p-1"
          type="number"
        >
        </b-form-input>
      </div>
    </div>
    <!-- LANGUAGES -->
    <div class="mt-2">
      <label for="lang-list-id">Language(s)</label>
      <div
        v-for="langKey in userLangsCount"
        :key="langKey"
        style="display: flex; flex-direction: row"
      >
        <b-form-input
          readonly
          :placeholder="userLangs[langKey - 1]"
          style="max-width: 50%; margin-top: 0.5rem"
          disabled
        ></b-form-input>

        **This form is set to read only, for display purposes only**

        <b-button
          variant="outline-danger"
          @click="removeLang(langKey)"
          style="margin-top: 0.5rem; margin-left: 1rem"
          >Remove</b-button
        >

        **This button removes a language from the userLangs array by calling removeLang(langKey)**

      </div>
      <div style="display: flex; flex-direction: row">
        <b-form-input
          v-model="userCurrentLang"
          list="langlist-id"
          placeholder="Add Language"
          style="max-width: 50%; margin-top: 0.5rem"
        ></b-form-input>
        <datalist id="langlist-id">
          <option>Manual Option</option>
          <option v-for="lang in langList" :key="lang.name">
            {{ lang.name }}
          </option>
        </datalist>
        <b-button
          :disabled="addLangBtnDisabled"
          variant="outline-primary"
          @click="addLang()"
          style="margin-top: 0.5rem; margin-left: 1rem"
          >Add</b-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import langList from "../assets/langList";
export default {
  name: "GeneralData",
  components: {},
  props: {
    userData: Object,
  },
  data() {
    return {
      userAge: null,
      langList: langList,
      userLangs: [],
      userCurrentLang: null,
    };
  },
  watch: {
    //Updating tabs with fetched values
    userData: function () {
      this.userLangs = this.userData.general.langs;
      this.userAge = this.userData.general.age
    },
  },
  computed: {

    **userGeneral is supposed to represent the data equivalent of userData.general, it is therefore computed from the user input, its value is updated each time this.userAge or this.userLangs changes**

    userGeneral: function () {
      //user data in data() have been filled with userData values
      return {
        age: this.userAge,
        langs: this.userLangs,
      };
    },

**returns the amount of languages spoken by the user to display them in a v-for loop**
    userLangsCount: function () {
      if (this.userLangs) {
        return this.userLangs.length;
      }
      return 0;
    },

**gets a list of languages name from the original JSON list for display purposes**
    langNameList: function () {
      let namelist = [];
      for (let i = 0; i < this.langList.length; i++) {
        namelist.push(langList[i].name);
      }
      return namelist;
    },

**returns true or false depending on whether entered language is in original list**
    addLangBtnDisabled: function () {
      for (let i = 0; i < this.langList.length; i++) {
        if (this.userCurrentLang == langList[i].name) {
          return false;
        }
      }
      return true;
    },
  },
  methods: {
    addLang() {
      this.userLangs.push(this.userCurrentLang);
      this.userCurrentLang = null;
    },
    removeLang(key) {
      this.userLangs.splice(key - 1, 1);
    },
  }
}
</script>

以下是在 Testing.vue 中更新 this.user 后浏览器内的 vuejs 开发工具中的数据：

Testing.vue 中的数据：

user : {
 general:{"age":22,"langs":["French"]}
}

GeneralData.vue 中的数据：

userData : {
  general:{"age":22,"langs":["French"]}
}

userAge : 22

userLangs : ["French"]

userGeneral : 
{
  general:{"age":22,"langs":["French"]}
}

到目前为止还不错吧？

这就是问题发生的地方，如果我更改表单中的年龄字段，userAge 会增加，userGeneral.age 会更新，但 userData.general.age 不会。这是预期的，因为 userGeneral.age 是从 this.userAge 计算出来的，并且 userData 是一个道具，所以它不应该被改变为一个好的做法（而不是方法集 userData.general.age = xxx 无论如何）。但是，如果我点击语言列表中法语旁边的“删除”按钮，this.userLangs 会按原样更新，现在是 []，this.userGeneral.langs 会更新为 []，并且它是直接从前者计算的。并且 userData.general.langs ... 也被更新为 [] ，这对我来说真的没有意义。

更糟糕的是，在父级 Testing.vue 中，user.general.langs 现在也设置为 []。

所以不知何故，this.userLangs 更新了 prop this.userData，并且这个 prop 更新了它在父组件中的原始发件人用户，尽管没有涉及任何类型的 $emit。

我不希望这种情况发生，因为我认为它不应该以这种方式发生，因此是一个hasard，但也因为我想稍后设置一个“保存”按钮，以允许用户一次修改他的值。

我试过的：在删除/添加按钮上的@click元素上设置各种.prevent，.stop，在调用自身的方法中，添加e.preventDefault（修改addLang和removeLang以发送$event元素），这些尝试都没有解决任何问题。

希望我没有正确实现 .prevent 部分，有人可以帮助我阻止这个令人讨厌的逆流问题。

标签： javascriptvue.jsvuejs2vue-componentvue-props

javascript - VueJS中如何防止Child组件中更新的数据更新Parent的数据[2.6.14]

问题描述

解决方案

推荐阅读