如何修复Vue中“v-model不能用于prop”的编译错误？

首先明确：你把v-model="modelValue"换成:value="modelValue"是正确的第一步，但还没完成完整的双向绑定逻辑——如果你的下拉选择需要同步到父组件的状态，必须补充事件触发的代码，否则会出现子组件显示与父组件数据不一致的问题。

为什么原代码报错？ #

Vue的prop是单向数据流：父组件传递给子组件的prop，子组件只能读取，不能直接修改。而v-model本质是语法糖，展开后是:value="xxx" + @input="xxx = $event.target.value"——直接用v-model="modelValue"会试图修改modelValue这个prop，违反了单向数据流规则，所以编译器报错。

正确的完整实现 #

你需要在子组件的select标签上，除了绑定:value="modelValue"，还要监听change事件，把选中的值通过update:modelValue事件emit给父组件：

<!-- MySelect 组件 -->
<template>
  <select 
    :value="modelValue" 
    @change="$emit('update:modelValue', $event.target.value)"
  >
    <!-- 你的下拉选项示例 -->
    <option value="asc">升序</option>
    <option value="desc">降序</option>
  </select>
</template>

<script setup>
// 声明接收的prop
defineProps(['modelValue'])
// 声明要触发的事件
defineEmits(['update:modelValue'])
</script>

父组件中就可以正常用v-model绑定状态：

<!-- App 组件 -->
<template>
  <MySelect v-model="sortType" />
</template>

<script setup>
import { ref } from 'vue'
const sortType = ref('asc')
</script>

你当前写法的局限 #

如果你的下拉选择不需要同步到父组件，只在子组件内部使用，那只写:value="modelValue"暂时能运行，但这不符合Vue的组件设计规范——一旦后续需要父组件感知选中变化，就会出现数据不同步的bug。补充emit事件后，才能实现符合Vue单向数据流的双向绑定，保证父子组件状态一致。

内容的提问来源于stack exchange，提问作者Александр Смирнов