Vue组件通信如何通过 Emit 回传评分星星组件当前选中的星级

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 实现双向绑定（需子组件同时支持 modelValue prop 和 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 和过渡效果，提升交互体验。