props 是 vue 中父子组件通信最基础、最推荐的方式；父组件管理奖品数据并传给子组件，子组件通过 defineprops 或 props 选项声明接收，需校验类型、设默认值，并按角度均匀分布渲染奖品。
Props 是 Vue 中父子组件通信最基础、最推荐的方式。在抽奖转盘场景中，父组件负责管理奖品数据（比如从 API 获取或 Vuex store 中读取），子组件（即转盘组件）通过 props 接收并渲染这些奖品。
明确 props 类型与结构
奖品列表通常是一个对象数组，每个对象至少包含 id、name、img 字段。子组件需用 defineProps（Vue 3 Composition API）或 props 选项（Options API）声明接收字段：
- 用
required: true标识必传项，避免渲染空转盘 - 建议加类型校验，如
Array as PropType<prizeitem></prizeitem>（TS 环境） - 可设默认值：
default: () => []，防止未传时报错
子组件内按角度均匀分布奖品
转盘是环形布局，需将每个奖品项旋转到对应扇区中心。假设奖品数为 n，则每份角度为 360 / n。常用做法是让每个 <div class="prize-item"> 通过 <code>transform: rotate(Xdeg) 定位：
- 索引
index对应角度index * (360 / prizes.length) - 为使文字正向朝外，常额外加偏移（如减去半角）：
rotate(${index * base - base / 2}deg) - 配合
transform-origin: center和绝对定位，实现扇区对齐
动态绑定样式与内容
在模板中遍历 prizes，把每个奖品的名称、图片、样式都绑定进去：
-
<p>{{ item.name }}</p>渲染奖品名 -
<img :src="item.img" alt="">加载图标 -
:style="{ transform: `rotate(${angle}deg)` }"控制位置 - 注意：CSS transition 需作用于父容器（如
.wheel），而非单个奖品项
父组件调用时正确传入数据
父组件需确保数据已就绪再传给子组件，避免初始为空数组导致布局异常：
- 可在
onMounted中请求奖品列表，再赋值给响应式变量 - 使用
v-if="prizes.length"包裹子组件，等数据加载完成再渲染 - 示例调用：
<luckywheel :prizes="prizeList"></luckywheel>，其中prizeList是 ref 或 reactive 数据
