Vue自定义评分组件需实现受控模式：通过modelValue接收初始值，点击时emit update:modelValue事件；支持小数评分与半星显示，用Math.floor和取模判断星态；悬停仅预览，点击才更新；可选清空与禁用功能，并暴露change、hover-change、clear等事件。
Vue 自定义评分星级组件的数据交互，核心是让组件既能接收外部值（如初始评分），又能将用户操作（点击、悬停）产生的新评分准确反馈出去。这本质上是实现一个符合 Vue 表单规范的“受控组件”，关键在于正确使用 v-model 机制和事件通信。
用 v-model 实现双向绑定
Vue 3 中，v-model 是语法糖，等价于同时传递 :modelValue prop 并监听 @update:modelValue 事件。你的星级组件必须支持这两者：
- 在
props中声明modelValue（类型为Number），用于接收父组件传入的当前评分 - 在用户点击某颗星时，触发
emit('update:modelValue', newScore)，通知父组件更新数据 - 父组件使用时写成
支持小数评分与半星显示
真实场景中评分常为小数（如 3.6 分），组件需能渲染“三颗满星 + 一颗半星”。这需要在模板中做精细判断：
- 用
Math.floor(score)得到完整星数量 - 用
score % 1 >= 0.5判断是否需要半星 - 剩余星用空心图标填充，确保总数恒为 5
- 不依赖 CSS 裁剪或伪元素遮罩，而是生成明确的类名数组（如
['on', 'on', 'on', 'half', 'off']），再用v-for渲染对应样式
处理悬停与点击的交互逻辑
良好的用户体验需要区分“预览”和“确认”：
- 用
hoverIndex响应@mouseover，仅影响视觉高亮，不改变实际值 - 点击时才调用
emit('update:modelValue', i)，其中i是第几颗星（1~5） - 可选：支持再次点击清空（
allowClear: true），即点击已选星时设为 0 - 若需禁用交互，直接加
disabledprop 并在模板中添加:class="{ disabled }"和@click.prevent
暴露额外事件增强控制力
除基础 v-model 外，可按需提供更细粒度的事件：
-
@change：评分最终确认后触发（类似原生表单的 change） -
@hover-change：鼠标移入/移出时触发，参数为临时悬停值，便于做 Tooltip 提示 -
@clear：当allowClear开启且用户清空时单独发出，方便做特殊日志或校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
