物业突变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型，试试这个：

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

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