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 dev工具中的数据：
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是从这个.userAge计算出来的，而userData是一个prop，所以它不应该作为一个好的实践而被改变（无论如何，不是方法集userData.general.age = xxx）。然而，如果我点击语言列表中法语旁边的Remove按钮，这个.userLangs会按照它应该的方式更新，现在是[]，这个.userGeneral.langs会更新为[]，并且它是直接从前者计算出来的。和userData.general.langs…我也是这样，这对我来说真的没有意义。
更糟糕的是，在父项Testing.vue中，user.general.langs现在也被设置为[]。

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

我不希望这种情况发生，因为我不认为它应该以这种方式发生，因此是一个hasard，但也因为我想设置一个'保存'按钮后，允许用户修改他的值一次。
我尝试过的：在Remove / Add按钮上的@click元素上设置各种.prevent，.stop，在方法调用本身中添加e.preventDefault（修改addLang和removeLang以发送$event元素），这些尝试都没有解决任何问题。
希望我没有正确地实现.prevent部分，有人可以帮助我阻止这个令人讨厌的反向流问题。

App.vue

<template>
  <div v-for="(question, index) in questions" :key="question.id" style="margin: 10px 0;">
    <TestComponent :get-question="question">
    </TestComponent>
  </div>

  <button @click="getQuestions()">Output</button>
</template>

<script>

import TestComponent from './TestComponent.vue';
export default {
  components: {
    TestComponent
  },
  data() {
    return {
      questions: [
        {
          id: 1,
          type: 'select',
        },
        {
          id: 2,
          type: 'checkbox',
        },
        {
          id: 3,
          type: 'checkbox',
        },
        {
          id: 4,
          type: 'radio',
        },
        {
          id: 5,
          type: 'checkbox',
        },
        {
          id: 6,
          type: 'text',
        }
      ]
    }
  },
  methods: {
    getQuestions() {
      console.log(this.questions);
    }
  }
}
</script>

TestComponent.vue

<template>
    <label>Select Type</label>
    <select v-model="qst.type">
        <option :value="qstType" v-for="qstType in ['select', 'textarea', 'radio', 'checkbox', 'text']" :key="qstType">{{
            qstType }}
        </option>
    </select>
</template>

<script>
export default {
    props: ['getQuestion'],
    data() {
        return {
            qst: this.getQuestion,
        }
    }
}
</script>

我已经尝试了这个方法来分配对象的副本，但没有工作，（watch属性没有被触发）任何帮助

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

2条答案

相关问题

热门标签

最新问答