属性 Vuejs 中的突变

Question

所以我有多个这样的代码：

<input id="data" type="text"  v-model="data">
<label for="data">Data</label>

我试着用它做一个属性这样我就不会每次都重复了:

Vue.component('textbox', {
  template: `
   <div>
   <input :id="id" type="text" v-model="value">
   <label :for="id">{{ label }}</label>
   </div>
  `,
  props: [
      "id", "value", "label", "for"],
  watch: {
    value: function(newVal){
       this.$emit('input', newVal)
    }
  }
})

并像这样在我的 html 中访问它：

<textbox v-model="data" id="someID" label="Data"></textbox>

一切正常，但每次我在文本框中输入时，我都会在控制台中收到此警告：

[Vue warn]: 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: "value" 
(found in component <textbox>)

有没有办法删除该警告消息？还是我做错了？任何帮助将不胜感激。

Answer 1

您根本不需要使用手表。而不是使用 v-model，试试这个：

<input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">

工作示例：http://codepen.io/CodinCat/pen/dNQopR?editors=1010

属性 Vuejs 中的突变

Property mutation in Vuejs

html

javascript

vue.js

vue-component

vuejs2