javascript - 避免直接修改 prop，因为值会被覆盖

Question

我在升级到 Vue 2.0 时遇到了一个很常见的问题

我收到警告:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "username" (found in the component )

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

username 和 password 在主 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 但它似乎不起作用，我不明白为什么。它应该将值绑定(bind)到父级(主要 Vue 应用程序)

Answer 1

从 Vue 2.3.0 开始，您可以使用 .sync 修饰符:

样本来自 https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier :

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

在你的 Controller 中......

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