避免直接更改道具，因为值会被覆盖

JavaScript

LEY老丝

2020-03-12

我在升级到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应用）

第1274篇《避免直接更改道具，因为值会被覆盖》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
猿Green 2020.03.12

如果您的道具是物体，则可以快速解决。

您可以$emit通过Object.assign()在Javascript中使用来避免使用或获取该错误。这将与v-model属性相同。

例：

// Update the user
Object.assign(this.userProp, user);
Harry逆天 2020.03.12

一个computed适当的财产get，并set为我工作：

computed: {
  dialogDataProp: {
      get: function() {
        return this.dialog;
      },
      set: function() {}
    }
}

上面的代码用于切换对话框。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android