Vue子组件v-model绑定父传prop报Avoid mutating a prop错误如何解决

该警告由Vue单向数据流规则触发：父组件传递给子组件的prop仅能由父组件修改，子组件直接修改prop会导致状态不一致，父组件重渲染时还会覆盖子组件的修改。你当前在子组件内直接将输入框的v-model绑定到了父传的valueprop上，输入时会直接修改prop值，因此触发警告。

第一步：修改子组件代码 #

将输入框的双向绑定拆分为单向prop绑定 + 事件派发，避免直接修改prop：
找到子组件内所有input标签，将直接绑定v-model="value"的写法替换为：

<!-- 原有写法 v-model="value" 替换为以下内容 -->
<input :value="value" @input="$emit('input', $event.target.value)" type="text" class="form-control" />

注意：overhead/below/left/right其他标签类型下的input标签也要做相同修改，否则切换标签类型后仍会出现状态不同步问题

第二步：修改父组件调用逻辑 #

父组件调用ShortText时，使用v-model绑定值，替代原来的:value传参：

<ShortText
  v-if="formInput_Item.type === 'text'"
  :input_id="formInput_Item.input_id"
  :form-input-item="formInput_Item.formInput_Item"
  :label_type="label_type"
  :validations="formInput_Item.validations"
  :is-valid="isValid"
  v-model="value"
/>

Vue组件的v-model语法糖默认会自动绑定valueprop，同时监听子组件派发的input事件更新父组件的值，完全符合单向数据流要求。

额外优化建议 #

你当前是循环渲染多个表单项，但仅用了一个value变量存储输入值，会导致所有输入框共享同一个值、修改互相覆盖。建议将value改为对象格式，用表单项的input_id作为键存储对应值，示例：
父组件data初始化：

data() {
  return {
    // 其他变量保持不变
    value: {} // 初始为空对象
  }
}

调用组件时绑定对应键的值：

v-model="value[formInput_Item.input_id]"

内容的提问来源于stack exchange，提问作者Anil Kumar