作用域插槽是解决商品规格动态展示最自然的方式——子组件管数据和逻辑，父组件管样式和交互。它将specList、selected、canSelect等原始信息交由父组件按需渲染，并通过updateSelection方法闭环处理用户操作，支持多品类与移动端响应式适配。
作用域插槽是解决商品规格动态展示最自然的方式——子组件管数据和逻辑，父组件管样式和交互。它不强制你写死“颜色选色块、尺寸选按钮”，而是把规格项、选中状态、禁用规则等原始信息交到父组件手里，由你按需渲染。
规格数据由子组件统一管理
在商品详情页主组件（如 ProductDetail.vue）中，子组件内部维护完整的规格树结构：SKU 列表、属性维度（颜色、尺码、内存）、各选项的库存状态与联动关系。它不直接渲染任何 UI，只通过作用域插槽把当前上下文“吐”出来：
- specList：扁平化的可选规格项数组，含 id、name、value、stock、disabled 等字段
-
selected：当前已选中的规格键值对，例如
{ color: 'red', size: 'M' } - canSelect：一个函数，接收任意规格组合，返回是否可选（用于实时禁用无效选项）
父组件自由决定怎么画规格控件
你可以在调用处用 v-slot:specification="{ specList, selected, canSelect }" 接收这些数据，然后按商品类型定制 UI：
- 服装类：颜色渲染为圆点色块，尺码渲染为带角标的按钮，点击时调用
canSelect({ color: 'blue', size: 'L' })判断是否可选 - 手机类：内存和版本用下拉选择器，支持搜索；颜色用高清预览图轮播，点击切换主图
- 食品类：保质期和规格单位（如“250g/盒”）用标签式胶囊，不可点击仅展示
联动与反馈必须闭环处理
作用域插槽只负责“传出”，用户操作仍需“传回”。推荐在子组件暴露一个 updateSelection 方法，供父组件绑定事件：
- 点击颜色块时：
@click="updateSelection('color', value)" - 切换下拉框时：
@change="updateSelection('storage', $event.target.value)" - 子组件收到后重新计算 SKU 匹配、更新
selected和禁用状态，并触发插槽重渲染
移动端适配要提前考虑
规格区域在小屏上容易拥挤，建议在父组件中结合屏幕宽度做响应式策略：
- 宽度
- 使用
teleport把浮层挂载到 body，避免被局部滚动容器裁剪 - 浮层内规格项使用大触控区域，禁用默认长按菜单，添加视觉反馈动效
不复杂但容易忽略。关键不在怎么写插槽语法，而在于想清楚——哪些该子组件算（库存、联动、SKU 匹配），哪些该父组件定（UI 形态、动效、交互节奏）。分清边界，规格区就不再是一段重复粘贴的代码，而是一个活的数据管道。
