避免直接改变道具，因为该值将被覆盖

Question

升级到Vue 2.0我有很常见的问题

我得到警告：

避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“用户名”（在组件中找到）

我读了很多次文档，但仍然不明白如何修复它。

用户名和密码在主Vue应用中声明。

这是我的代码：

var GuestMenu = Vue.extend({
   props : ['username', 'password'],
      template: `
        <div id="auth">
            <form class="form-inline pull-right">
                <div class="form-group">
                    <label class="sr-only" for="UserName">User name</label>
                  <input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="Password">Password</label>
                  <input type="password" v-model="password" class="form-control" id="Password" placeholder="Password">
                </div>
            </form>
        </div>`,
    });

App = new Vue ({ 
   el: '#app',
  data: 
    {
      topMenuView: "guestmenu",
      contentView: "guestcontent",
      username: "",
      password: "",

    }
})

我尝试了v-bind，但它似乎不起作用，我不明白为什么。它应该将该值绑定到父级（主Vue应用程序）

Answer 1

VUE JS认为这是反模式。例如，声明和设置一些道具，如

this.propsVal = 'new Props Value'

因此，要解决这个问题，您必须从道具中获取Vue实例的数据或计算属性的值。喜欢

props: ['propsVal'],
data: function() {
   return {
       propVal: this.propsVal
   };
},
methods: {
...
}

你可以像平常一样使用道具的价值。

Answer 2

您应该使用getter和setter创建一个计算属性，然后使用$emit更新该属性，例如：

var GuestMenu = Vue.extend({
    props: ['username', 'password'],
    template: `
    <div id="auth">
        <form class="form-inline pull-right">
            <div class="form-group">
                <label class="sr-only" for="UserName">User name</label>
              <input type="username" v-model="usernameInput" class="form-control" id="UserName" placeholder="username">
            </div>
            <div class="form-group">
              <label class="sr-only" for="Password">Password</label>
              <input type="password" v-model="passwordInput" class="form-control" id="Password" placeholder="Password">
            </div>
        </form>
    </div>`,
    computed: {
        usernameInput: {
            get: function(){
                return this.username;
            },
            set: function(newValue){
                this.$emit('update:username', newValue)
            }   
        },
        passwordInput: {
            get: function(){
                return this.password;
            },
            set: function(newValue){
                this.$emit('update:password', newValue)
            }   
        },
    }
});

Answer 3

在上的Vue 2.3.0中，您可以使用.sync修改器：

样本来自https://vuejs.org/v2/guide/components-custom-events.html#sync-修饰语：

<text-document :title.sync="title"></text-document>

在你的控制器里。。。

this.$emit('update:title', newTitle)