Vue3中直接用props绑定v-model为何无效且无报错？

你的问题主要由三个核心原因导致，下面结合你的代码逐一解释：

1. 模板变量名大小写不匹配 #

你在SelectMenu.vue模板里写的是v-model="SelectedItem"，但组件props定义的是小驼峰命名的selectedItem。Vue模板内的变量名严格区分大小写——SelectedItem是一个未定义的全新变量，和你传入的selectedItem prop完全无关，自然无法正确绑定选中状态。

就算要直接用prop绑定，模板里也应该写v-model="selectedItem"，不过这还会遇到下面的规则限制问题。

2. 单向数据流规则限制 #

Vue的props是单向向下传递的：父组件数据更新会同步到子组件，但子组件绝对不能直接修改props的值。而v-model本质是语法糖，它等价于：

<select :value="selectedItem" @input="selectedItem = $event.target.value">

也就是说，当用户选择新选项时，v-model会尝试直接修改绑定的变量——也就是你的selectedItem prop。这违反了Vue的单向数据流规则，不仅会导致组件状态混乱，在开发模式下还会触发控制台警告（你没看到报错可能是关闭了开发模式提示）。

这也是官方推荐的做法：如果需要在子组件中修改外部传入的值，要把prop转成子组件的本地data变量（就像你修复版里的localSelectedItem），或者用计算属性配合自定义事件实现双向同步。

3. 数据类型不匹配 #

你在App.vue中定义的menuASelectedItem: 3是数字类型，但SelectMenu的props里selectedItem指定类型为String，同时<option>的:value绑定的是字符串'3'。数字3和字符串'3'在严格相等校验下不匹配，这也会导致<select>无法识别选中项。

你的修复版能正常工作，是因为Vue在把数字prop赋值给localSelectedItem时做了隐式类型转换，让localSelectedItem变成了和option value一致的字符串类型。

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