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

Question

我在升级到 Vue 2.0 时遇到了非常常见的问题

我收到警告：

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

我多次阅读文档，但我仍然无法理解如何修复它。

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 但它似乎不起作用，我不明白为什么。它应该将值绑定到父级（主 Vue 应用程序）

原文由 Dmitry Bubnenkov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

在你的控制器中……

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

原文由 ESP32 发布，翻译遵循 CC BY-SA 4.0 许可协议