Javascript Vuejs中的属性突变

因此，我有多个类似这样的代码：

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

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

资料

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

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)
    }
  }
})

Vue.component（'textbox'{
模板：`
{{label}}
`,
道具：[
“id”、“value”、“label”、“for”]，
观察：{
值：函数（newVal）{
此.$emit（'input'，newVal）
}
}
})

并在我的html中访问它，如下所示：

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

<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>)

[Vue warn]：避免直接变异道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具变异：“价值”
（在组件中找到）

---

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

您根本不需要使用手表。请尝试以下方法，而不是使用v型：

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

---

工作示例：

错误本身表示，使用基于道具值的数据或计算属性，因此尝试使用数据或计算属性代替道具prop@VinodLouis你介意给我举个例子吗？我不太明白是谁干的！非常感谢。