Vue 3 中用 v-model 实现评分组件需以 modelValue 接收值、通过 update:modelValue 事件通知父级更新，渲染5颗星并支持点击评分、悬停高亮及禁用状态。
Vue 3 中用 v-model 实现评分组件的星级绑定，核心是把组件设计成支持双向绑定的“受控组件”，即内部通过 modelValue 接收值、通过 update:modelValue 事件通知父级更新。星级评分通常用 `` 或 `
1. 父组件中使用 v-model 绑定评分值
直接像使用原生表单一样使用：
<StarRating v-model="score" />
<p>当前评分：{{ score }}</p>
其中 score 是响应式变量（ref(0) 或 reactive({ score: 0 })），Vue 会自动将它映射为 :modelValue 和 @update:modelValue。
2. 子组件（StarRating）定义 props 和事件
组件需声明接收 modelValue，并触发 update:modelValue：
立即学习“前端免费学习笔记（深入）”；
const props = defineProps({
modelValue: { type: Number, default: 0 }
});
const emit = defineEmits(['update:modelValue']);
const handleClick = (index) => {
emit('update:modelValue', index);
};
注意：Vue 3 不再支持 v-model 的自定义 prop 名（如旧版的 value + input），必须使用 modelValue + update:modelValue 这对约定。
3. 渲染星级并处理悬停/点击交互
用循环渲染 5 颗星，根据当前评分和鼠标位置决定是否高亮：
- 显示逻辑：第
i颗星（从 1 开始）若 ≤ 当前评分（props.modelValue），则显示实心星；否则空心 - 悬停时临时高亮：用
hoverIndex跟踪鼠标移入的星序号，渲染时优先按hoverIndex显示 - 点击即提交：绑定
@click="handleClick(i)"
示例模板片段：
<div class="star-rating">
<span
v-for="i in 5"
:key="i"
@click="handleClick(i)"
@mouseover="hoverIndex = i"
@mouseleave="hoverIndex = 0"
>
{{ i <= (hoverIndex || props.modelValue) ? '★' : '☆' }}
</span>
</div>
4. 支持只读或禁用状态（可选增强）
添加 disabled prop，控制交互和样式：
- 在
props中增加disabled: Boolean - 点击事件加守卫：
if (props.disabled) return - 给外层容器加
:class="{ 'disabled': props.disabled }"，配合 CSS 灰化
这样组件就能自然响应 v-model，也兼容 :model-value + @update:model-value 手动写法，满足各种集成场景。
