slot 是 html 模板的内容占位符，不是数据传递机制或事件通信方式；父组件内容默认插入子组件 位置，需子组件显式声明且未被条件隐藏，否则被静默丢弃。
slot 是什么，不是什么
slot 不是数据传递机制，也不是事件通信方式，它只是 HTML 模板的“内容占位符”。父组件往子组件标签里写的任何内容，默认会被丢进子组件的 <slot></slot> 位置——前提是子组件显式写了 <slot></slot>。没写，内容就直接被丢弃，连 warning 都没有。
常见错误现象：
父组件写了内容，子组件却啥也没渲染出来。
原因几乎全是子组件模板里漏了 <slot></slot>，或者写了但被条件渲染（v-if）意外隐藏了。
- uni-app 的 slot 和 Vue 2.6+ 一致，不支持作用域插槽的简写语法（
v-slot:xxx可用，#xxx在 H5 和小程序平台表现不稳定，建议统一用v-slot） - 微信小程序平台对具名 slot 名称敏感，只认小写字母 + 中划线（
header、user-info），大写或下划线会失效 - App 端（iOS/Android）和 H5 对
v-slot支持良好，但 NVue 渲染模式下不支持具名 slot，只支持默认 slot
怎么传默认内容和具名内容
默认 slot 就是不带 name 的内容；具名 slot 要靠 name 属性配对。父子之间不传 props、不发事件，纯靠结构嵌套“塞进去”。
使用场景：封装按钮、卡片、表单布局等需要灵活定制内部结构的组件。
<!-- 父组件 --> <my-card><view v-slot:header>用户信息</view><view v-slot:default>这里是主体内容</view><view v-slot:footer><button>确定</button></view></my-card>
<!-- 子组件 my-card.vue --> <template><view class="card"><view class="header"><slot name="header"></slot></view><view class="body"><slot></slot></view><view class="footer"><slot name="footer"></slot></view></view></template>
-
v-slot:default可省略为v-slot或直接不写（即裸写内容），但一旦用了具名 slot，所有非默认内容都必须显式声明v-slot - 多个同名
v-slot会按顺序覆盖，只保留最后一个；不要在同一个父组件里重复定义同一name - 如果子组件想提供 fallback 内容（比如 slot 为空时显示提示），写成
<slot>暂无内容</slot>即可
为什么 props + slot 经常一起用
slot 解决“长什么样”，props 解决“是什么”。比如一个列表项组件，用 props 传 title、avatar，用 slot 控制操作区怎么排版——二者分工明确，混用才自然。
容易踩的坑：
试图用 slot 传原始数据（如 <my-item>{{ item.name }}</my-item>），结果发现子组件拿不到 item 上下文 —— 因为 slot 内容是在父作用域编译的，子组件无法访问其内部变量，除非用作用域插槽。
- 作用域插槽必须子组件主动暴露数据，通过
slot-scope（Vue 2）或v-slot="scope"（Vue 2.6+ / uni-app）接收，不能反向“取” - uni-app 中，作用域插槽在小程序平台需注意：绑定的数据必须是响应式对象属性，直接传字面量（如
:data="123"）会导致 scope 为空 - App 端 NVue 下不支持作用域插槽，如有兼容需求，改用 props + 自定义事件组合替代
slot 在不同平台的实际表现差异
uni-app 编译到不同端时，slot 的解析时机和 DOM 结构生成逻辑不同，导致视觉或行为不一致。这不是 bug，是底层渲染机制差异。
典型问题：
微信小程序中 slot 内容可能被包裹多一层匿名节点（<wx-view></wx-view>），影响 CSS 选择器；H5 下则直接扁平插入。
- 避免依赖 slot 外层 DOM 结构写 CSS，比如
.card > div很可能在小程序里失效，改用类名控制更稳 - 动态 slot（如配合
v-for使用）在小程序里需确保 key 唯一且稳定，否则内容错乱或复用异常 - 条件 slot（
v-if="showHeader" v-slot:header）在部分小程序平台会触发 slot 初始化异常，建议把条件移到 slot 外部容器上
最麻烦的其实是调试：H5 控制台能看到 slot 编译后的结构，小程序开发者工具里得点开“wxml”面板逐层展开才能确认 slot 是否正确落位。这点很容易被忽略，直到上线后才发现内容没显示。
