Vue.js使用.sync同步子组件输入框时修改prop警告的最佳解决方法

当前出现prop修改警告的核心原因是子组件直接将父组件传入的value prop绑定到v-model，v-model默认会修改绑定的变量，违反了Vue单向数据流的规范：子组件不能直接修改父组件传递的props，只能通过事件通知父组件自行修改状态。

方案1：轻量场景无额外内部状态（推荐） #

子组件无需新增额外响应式变量，直接拆分v-model的绑定逻辑即可，原有父组件的.sync绑定、转换逻辑完全不需要改动：
子组件模板修改为：

<!-- 去掉原有的v-model="value"和@keyup事件，替换为如下写法 -->
<input :value="value" @input="$emit('update:value', $event.target.value)" />

子组件的props定义保持不变即可，无需其他修改，输入时会自动触发update:value事件同步给父组件，完全不会修改prop，警告直接消失。

方案2：子组件需要额外内部处理逻辑（复杂场景适用） #

如果子组件内部需要对输入值做预处理、防抖等逻辑，可通过带get/set的计算属性实现双向绑定：

1. 子组件模板保留v-model绑定：

<input v-model="localValue" />

2. 子组件新增计算属性：

props: {
  value: String
},
computed: {
  localValue: {
    get() {
      // 直接返回父组件传入的prop值
      return this.value
    },
    set(newVal) {
      // 此处可添加子组件内部的预处理逻辑，比如去空格、防抖等
      this.$emit('update:value', newVal)
    }
  }
}

如果是Vue3环境，.sync修饰符已被官方废弃，可直接将父组件的绑定语法替换为v-model:value，子组件逻辑完全不需要改动：

<!-- 原写法 :value.sync="firstValue" 替换为如下写法 -->
<ChildComponent v-model:value="firstValue" />

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