Vue评分组件通过$emit将点击星级传给父组件：子组件用v-for渲染5颗星，点击触发rate事件传i+1；父组件监听@rate接收值，支持v-model双向绑定（Vue 3用modelValue/update:modelValue）。
在 Vue 中，评分星星组件（StarRating）通常需要将用户点击的星级通过 $emit 通知父组件。核心思路是：子组件内部用 `v-for` 渲染星星，绑定点击事件，触发自定义事件并传参；父组件监听该事件，接收当前选中的星级值。
子组件：StarRating.vue —— 渲染星星并 emit 选中值
使用 `props` 接收当前评分（可选，默认为 0），用 `v-for` 生成 5 颗星星。每颗星星点击时，通过 $emit('update:rating', index) 或更通用的 $emit('rate', index) 把星级（如 1～5）回传。
- 推荐使用语义化事件名，如
rate或change，避免与 Vue 内置机制冲突 - 注意索引处理：
v-for="(star, i) in 5"中i是 0 起始，所以传i + 1 - 可加高亮逻辑：鼠标悬停或点击时，前面所有星星（包括当前）显示为实心星
父组件：监听事件并接收星级
用 @rate="handleRate" 或 v-on:rate="handleRate" 监听子组件发出的事件，在方法中接收参数（即选中的星级），用于更新数据、提交表单或触发其他逻辑。
- 可以直接赋值：
this.userRating = rating - 也可配合
v-model实现双向绑定（需子组件同时支持modelValueprop 和update:modelValue事件）
进阶：支持 v-model 双向绑定（Vue 3 推荐写法）
在子组件中，用 props.modelValue 替代自定义 prop，点击时调用 $emit('update:modelValue', i + 1)；父组件直接写 v-model="userRating" 即可同步。
立即学习“前端免费学习笔记（深入）”；
- Vue 2 中需兼容写法：
props: { value: Number }+$emit('input', ...) - Vue 3 中统一为
modelValue和update:modelValue，更清晰且与 Composition API 一致
不复杂但容易忽略的是：确保子组件内点击事件没有被冒泡干扰，必要时加 @click.stop；另外，别忘了给星星元素设置合适的 cursor 和过渡效果，提升交互体验。
