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）回传。

1. 推荐使用语义化事件名，如 rate 或 change，避免与 Vue 内置机制冲突
2. 注意索引处理：v-for="(star, i) in 5" 中 i 是 0 起始，所以传 i + 1
3. 可加高亮逻辑：鼠标悬停或点击时，前面所有星星（包括当前）显示为实心星

父组件：监听事件并接收星级

用 @rate="handleRate" 或 v-on:rate="handleRate" 监听子组件发出的事件，在方法中接收参数（即选中的星级），用于更新数据、提交表单或触发其他逻辑。

1. 可以直接赋值：this.userRating = rating
2. 也可配合 v-model 实现双向绑定（需子组件同时支持 modelValue prop 和 update:modelValue 事件）

进阶：支持 v-model 双向绑定（Vue 3 推荐写法）

在子组件中，用 props.modelValue 替代自定义 prop，点击时调用 $emit('update:modelValue', i + 1)；父组件直接写 v-model="userRating" 即可同步。

1. Vue 2 中需兼容写法：props: { value: Number } + $emit('input', ...)
2. Vue 3 中统一为 modelValue 和 update:modelValue，更清晰且与 Composition API 一致

不复杂但容易忽略的是：确保子组件内点击事件没有被冒泡干扰，必要时加 @click.stop；另外，别忘了给星星元素设置合适的 cursor 和过渡效果，提升交互体验。