避免在 VueJS 2 中直接改变 prop

Question

首先，我刚刚开始玩 VueJS，所以这不能是这里建议的 VueJS 版本

它可能是以下内容的副本：

• 如何解决[Vue警告]：避免直接修改一个prop，因为它的值会在vue.js 2上被覆盖？- 不同之处在于我只是想用 , 设置v-bind一次值。
• 避免直接改变道具，因为值将被覆盖- 这看起来也有点相似，但解决方案对我不起作用。
• 通过javascript修改VUE组件的正确方法是什么？- 这个解决方案看起来和我的情况差不多
• vuejs 从子组件更新父数据

我的问题始于我的 Html 看起来像这样：

<div id="app">
  <div class="row">
    <div class="form-group col-md-8 col-md-offset-2">
      <birthday-controls
       :birthDay="birthDay"
       :birthMonth="birthMonth"
       :birthYear="birthYear">
      </birthday-controls>
    </div>
  </div>
</div>

和JS：

Vue.component('birthday-controls', {

    template: `<div class="birthday">
    <input type="text" name="year"  placeholder="yyyy" v-model="birthYear" size="4" maxlength="4"/>
    <input type="text" name="month" placeholder="mm" v-show="validYear" v-model="birthMonth" size="3" maxlength="2"/>
    <input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="birthDay" size="2" maxlength="2"/>
  </div>`,

    props: ['birthDay', 'birthMonth', 'birthYear'],

    computed: {
        validYear: function() {
            return (this.birthYear > new Date().getFullYear()-100 && this.birthYear < new Date().getFullYear()-14)
        },
        validMonth: function() {
            return (this.birthMonth > 0 && this.birthMonth <= 12)
        },
        validDay: function() {
            return (this.birthDay > 0 && this.birthDay <=31) //I have to add more checking here for february, leap years and ....
        }
    }

});

new Vue({
    el: '#app',

    data: function() {
        return {
            birthDay: "",
            birthMonth: "",
            birthYear: ""
        }
    },

});

我在这里准备了 codepen：http ://codepen.io/AngelinCalu/pen/OpXBay

然而，这里的第二个答案：vuejs update parent data from child component让我意识到我错过了一些东西

在该示例中，它设置了this.$emit('increment')其中一个方法的内部，并在特定事件上触发该方法。

在另一个示例中：使用 .vue webpack(vue2) 将子组件的数据组件更新为 vue.js 中的父组件，答案建议添加 awatch以发出更改。

  watch: {
    val() {
      this.$emit('title-updated', this.val);
    }
  }

现在我更糊涂了！处理这个问题的正确（或最佳）方法是什么？

注意：如果我从初始中删除html：

   :birthDay="birthDay"
   :birthMonth="birthMonth"
   :birthYear="birthYear"

它仍然按预期工作，但我仍然收到 Vue 警告，但是，如果我遵循这里的方法：https : //stackoverflow.com/a/41901150/2012740，它停止工作，但我没有错误。

我更新的代码：https : //jsfiddle.net/angelin8r/647m7vdf/

总结：我从一开始就需要功能，但没有 [Vue warn]

这是我在最初的例子中得到的：

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。相反，根据道具的值使用数据或计算属性。道具被变异：“birthYear”

Answer 1

警告是设置v-model为您的属性值的结果。原因是因为如果在组件外更改birthYear、birthMonth 或birthDay ，那么组件内当前的任何值都会立即被覆盖。

相反，捕获副本。

Vue.component('birthday-controls', {

    template: `<div class="birthday">
    <input type="text" name="year"  placeholder="yyyy" v-model="internalBirthYear" size="4" maxlength="4"/>
    <input type="text" name="month" placeholder="mm" v-show="validYear" v-model="internalBirthMonth" size="3" maxlength="2"/>
    <input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="internalBirthDay" size="2" maxlength="2"/>
  </div>`,

    props: ['birthDay', 'birthMonth', 'birthYear'],

    data(){
      return {
        internalBirthDay: this.birthDay,
        internalBirthMonth: this.birthMonth, 
        internalBirthYear: this.birthYear
      }
    },

    computed: {
        validYear: function() {
            return (this.internalBirthYear > new Date().getFullYear()-100 && this.internalBirthYear < new Date().getFullYear()-14)
        },
        validMonth: function() {
            return (this.internalBirthMonth > 0 && this.internalBirthMonth <= 12)
        },
        validDay: function() {
            return (this.internalBirthDay > 0 && this.internalBirthDay <=31) //I have to add more checking here for february, leap years and ....
        }
    }

});

你几乎完全在你的小提琴中做到了这一点，但你没有更正你的计算值。

computed: {
    validYear: function() {
        return (this.birthYear > new Date().getFullYear()-100 && this.birthYear < new Date().getFullYear()-14)
    },
    validMonth: function() {
        return (this.birthMonth > 0 && this.birthMonth <= 12)
    },
    validDay: function() {
        return (this.birthDay > 0 && this.birthDay <=31) //I have to add more checking here for february, leap years and stuff
    }
},

应该

computed: {
    validYear: function() {
        return (this.var_birthYear > new Date().getFullYear()-100 && this.var_birthYear < new Date().getFullYear()-14)
    },
    validMonth: function() {
        return (this.var_birthMonth > 0 && this.var_birthMonth <= 12)
    },
    validDay: function() {
        return (this.var_birthDay > 0 && this.var_birthDay <=31) //I have to add more checking here for february, leap years and stuff
    }
},