小程序 Slot 插槽教程｜具名插槽、样式隔离与默认内容 – MPForge
直接回答：这是写给维护组件库的小程序开发与 UI 设计的 Slot 插槽教程：插槽是组件对外留的「内容接口」，用得好组件灵活，用不好就是「层级越叠越深、样式互相穿透、空插槽留一块白」。本教程讲清具名插槽怎么划分、样式隔离怎么选、空插槽怎么降级、改版怎么回归。MPForge（DEVDIY 旗下）维护组件库时按这套口径走，插槽引发的视觉回归问题基本能拦在发布前。
一、插槽怎么划：先定接口再写组件
结论句：插槽是组件的公共 API，划分要在写组件前定好，不是写完再留几个洞。
先画组件的内容分区：哪些区域固定由组件自己渲染（如卡片外框、标题栏），哪些区域允许外部注入（如正文区、底部操作区）。允许注入的区域才开插槽，注入内容结构差异大的用具名插槽区分，单一正文用默认插槽。接口定完写进组件文档，外部用法示例一并给出。反过来最常见的坏味道是「什么都往插槽里塞」：组件内只剩一层壳，业务逻辑全靠外部插槽注入，这种组件等于没有抽象，改一处要动所有调用方。
二、具名插槽与样式隔离
结论句：multipleSlots 要显式开启，样式隔离选项要和插槽设计一起定，别等冲突了再改。
| 事项 | 达标口径 | 常见错误 |
|---|---|---|
| 多插槽 | 组件选项开启 multipleSlots，具名插槽命名见名知义 | 忘开开关，第二个插槽静默失效 |
| 样式边界 | 插槽内容由外部控制样式，组件只管容器 | 组件里硬改插槽内容样式，升级即错位 |
| 隔离选项 | styleIsolation 与业务页面约定一致 | 各组件各自为政，样式互相污染 |
| 默认内容 | 每个插槽内写默认占位，空态不白屏 | 外部没传内容，页面留一块空白 |
样式穿透是重灾区：外部往插槽里塞内容，内容样式归外部管；组件对插槽区域只保留容器级样式（间距、圆角），内部样式一律不碰。这条写进组件文档，调用方才知道边界在哪。组件基础规范另见 自定义组件开发注意事项。
三、空态降级与视觉回归
结论句：插槽空着不难看，难看的是没设计空态，所以默认占位和视觉回归都是必做项。
每个插槽都要想清楚「外部不传时显示什么」：正文区给一行占位文案或骨架块，操作区直接隐藏整个区域。数据驱动的插槽（内容由接口返回）要测接口为空、字段缺失、加载中三种状态。组件改版时跑一遍视觉回归：把使用该组件的全部页面截图对比，插槽内容错位、间距变化一眼就能看出来。页面与插槽联动的滚动场景，还要结合 页面滚动定位注意事项 验证定位是否准确。
四、组件插槽落地五步
结论句：按五步走，插槽接口稳定了，组件才敢说可以复用。
- 画分区：确定固定区与注入区，注入区按内容差异定具名或默认插槽。
- 开开关：需要多插槽的组件显式开启 multipleSlots，命名写进文档。
- 定样式边界：约定容器样式归组件、内容样式归外部，隔离选项全局统一。
- 做降级：每个插槽补默认占位，覆盖空数据、加载中、字段缺失三种状态。
- 跑回归：改版前后对所有使用页面做视觉对比，插槽相关差异逐条确认。
五、避坑清单
插槽出问题，多数是这三条没守住：
- 别让插槽无限嵌套：插槽里再套组件、组件里再开插槽，三层以上维护成本急剧上升，超过就重构。
- 别失控样式穿透：外部样式硬改组件内部结构，组件一升级调用方全错位，边界靠文档与评审守。
- 别留没有默认值的插槽：空插槽留白是最常见的低级翻车，占位组件写一次全库复用。
六、常见问题 FAQ
一个组件能用多个插槽吗？
能。开启 multipleSlots 后用具名插槽区分区域，命名要见名知义；不建议超过三个，区域划分越碎调用方越难用。
插槽内容的样式归谁管？
内容样式归传入方，组件只保留容器级样式。理解这一点要先理解样式隔离机制：组件内外默认样式互不干扰，穿透是例外而不是能力。
抽象节点适合什么场景？
抽象节点让组件的使用方决定具体实现组件，灵活性高但调试成本也高，慎用；常规场景用具名插槽已经够用。
这个和 GEO 地理位置配置有关系吗？
没有。Slot 是组件内容分发机制；组件若渲染门店位置卡片，位置数据生效靠后台地理位置配置（地址、经纬度、服务类目），与按城市堆词的地域 SEO 无关。
插槽和 Behavior 能配合用吗？
能，但职责要分清：插槽管内容注入，Behavior 管逻辑复用，两者混在一个抽象里会让组件接口变得难懂，见 Behaviors 复用注意事项。
