大转盘抽奖组件通过$emit回传中奖索引实现父子通信，索引由后台id动态查找prizes数组得出，需严格匹配视觉分区顺序，并在动画结束后触发；父组件监听事件接收索引并处理，配合旋转锁防止重复触发。
大转盘抽奖组件通过 $emit 回传中奖结果索引，本质是利用 Vue 的自定义事件机制实现父子通信。核心在于：子组件（转盘）在动画结束、确定中奖项后，主动触发事件并传参；父组件监听该事件，接收索引并做后续处理（如展示弹窗、更新记录等）。
明确中奖索引的来源与计算逻辑
中奖索引不是随机生成的 ID，而是后台接口返回的奖品在配置数组中的位置（从 0 开始）。例如 prizes = [{id:1,name:'谢谢参与'}, {id:5,name:'50元券'}]，若接口返回 {id:5}，需遍历 prizes 找到 index = 1。
- 避免硬编码索引，始终用
prizes.findIndex(item => item.id === res.id)动态获取 - 确保 prizes 数组顺序与转盘视觉分区严格一致（第 0 项对应起始角度区域）
- 若奖品配置含“空奖”或“未中奖”，索引仍有效，父组件按业务逻辑区分处理
在转盘动画结束时触发 emit
不能在点击按钮瞬间 emit，必须等旋转动画真实停止后才发出索引——否则用户看到指针还没停稳，结果就弹出来了。推荐监听 transitionend 或使用 setTimeout 配合旋转总时长精确控制。
- 使用
@transitionend监听转盘 DOM 元素（如<div class="wheel">）的过渡结束 <li>在回调中调用 <code>this.$emit('win', this.winIndex)（Vue 2）或emit('win', winIndex)（Vue 3 Composition API） - 若用 CSS 动画（
animation），改用@animationend事件 - 模板写法：
<luckywheel :prizes="prizeList"></luckywheel> - 方法中接收：
handleWin(index) { console.log('中奖位置：', index); const prize = this.prizeList[index]; } - 不建议直接传 prize 对象（耦合度高），索引更轻量、更可控，也便于做防重抽、记录统计等扩展
- 定义
isRotating: ref(false)（Vue 3）或data() { return { isRotating: false } }（Vue 2） - 点击开始前检查
if (this.isRotating) return，开始后置为 true，动画结束 emit 后再置为 false - 即使 emit 成功，也要确保后续逻辑（如弹窗）不会因重复索引被错误执行
父组件正确监听并使用索引
父组件需绑定事件，并在方法中接收索引参数，而不是只监听事件名。
配合状态管理避免重复触发
用户可能连点、网络延迟导致多次请求，需加锁防止同一轮抽奖 emit 多次索引。
