Vue3报错：v-model不可用于prop，如何将props转为可编辑数据？

错误原因 #

Vue的props遵循单向数据流原则，子组件仅能读取props的值，不能直接修改。v-model本质是v-bind:value与v-on:input的语法糖，直接绑定到props时，输入框的修改会尝试改写props，触发框架报错。

解决方案一：使用局部响应式变量（简单场景首选） #

在子组件内声明一个响应式变量，以props的timer作为初始值，将v-model绑定到这个局部变量上。若需同步修改后的值给父组件，可在save方法中通过emit事件通知父组件更新。

修改后代码：

<template>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input @keypress.enter="save" v-model="localTimer" type="number" class="input is-normal">
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: ['id', 'timer'],
  setup(props, context) {
    // 声明局部响应式变量，初始值取自props
    const localTimer = ref(props.timer)

    // 可选：父组件更新timer时，同步到局部变量
    watch(() => props.timer, (newVal) => {
      localTimer.value = newVal
    })

    const save = async () => {
      // 将修改后的值同步给父组件
      context.emit('update:timer', localTimer.value)
      // 执行你的保存逻辑
      // ...
    }

    return {
      localTimer,
      save
    }
  }
}
</script>

解决方案二：使用自定义v-model（官方推荐的双向绑定方式） #

按照错误提示的思路，用v-bind绑定props，同时监听input事件触发update:timer事件，实现双向绑定。这种方式无需额外局部变量，更符合Vue的双向绑定规范。

修改后代码：

<template>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input 
          @keypress.enter="save" 
          :value="timer" 
          @input="$emit('update:timer', $event.target.valueAsNumber)"
          type="number" 
          class="input is-normal"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id', 'timer'],
  setup(props, context) {
    const save = async () => {
      // 直接使用props.timer即可，已通过emit同步给父组件
      // 执行你的保存逻辑
      // ...
    }

    return {
      save
    }
  }
}
</script>

父组件使用该子组件时，通过v-model:timer实现双向绑定：

<!-- 父组件代码片段 -->
<AudienceTimerSlide v-model:timer="parentTimer" :id="someId" />

总结 #

• 方案一适合需要在子组件内临时修改值、最后统一同步给父组件的场景
• 方案二更贴合Vue双向绑定设计，适合实时同步值的场景

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