插槽内容不显示，主因是v-if误加在<slot>标签上；正确做法是用外层容器包裹并绑定v-if，或在作用域插槽中使用安全访问语法。

插槽内容不显示，八成是 v-if 错放位置了。Vue 的 slot 本质是“内容出口”，不是“容器”，v-if 直接加在 <slot> 标签上，会把整个出口干掉——父组件传的内容根本进不来，自然什么也看不到。

别把 v-if 写在 <slot> 标签上

这是最常见也最容易踩的坑。比如子组件里这样写：

• <slot v-if="showHeader"></slot> → 错误！showHeader 为 false 时，<slot> 节点被完全移除，父组件传的 header 插槽内容压根不会被编译、也不会传递进来。
• 正确做法：用一个外层容器包裹具名插槽，并把 v-if 放在容器上：<div v-if="showHeader"><slot name="header"></slot></div>。这样插槽始终存在，只是容器按需渲染。

uni-app 小程序里更敏感

微信小程序对 slot 渲染机制更严格，v-if 和 v-slot 同时出现在同一元素上，容易直接失效（尤其在 H5 正常、小程序白屏时）。常见表现：

• <template v-slot:header v-if="show">…</template> → 小程序可能忽略 v-if 或完全不渲染
• 推荐写法：先判断条件，再决定是否嵌套 v-slot 块：<template v-if="show"><template v-slot:header>…</template></template>
• 实在不行，就把 v-if 下沉到插槽内部标签里，比如 <u-icon v-if="isLink" name="arrow-right"></u-icon>

el-table / uview 等组件中要防缓存干扰

像 el-table-column 或 u-collapse-item 这类封装较深的组件，内部会对列/插槽做预编译或实例缓存。一旦你用 v-if 控制插槽内容，容易触发 DOM 复用异常：

• 表头图标不更新、操作列文字错乱、列宽崩塌
• 控制台报 cannot read property 'renderHeader' of undefined
• 解决关键：给 el-table 或 el-table-column 加唯一 :key，比如 :key="tableKey"（每次数据变更时更新），强制重新解析插槽结构
• 或者用 <div> 包裹插槽内容，避免 v-if 直接作用于 slot 出口

作用域插槽里注意数据安全

用 <slot name="item" :row="row"></slot> 时，如果在子组件中这样写：<slot name="item" v-if="row.id"></slot>，row 可能还没传入就执行判断，导致报错。

• 改用安全访问：v-if="row?.id"（Vue 3）或 v-if="row && row.id"（Vue 2）
• 或提前设默认值：props: { row: { type: Object, default: () => ({}) } }
• 动态插槽名也要小心：<slot :name="customName" v-if="hasCustom"></slot> ✅；<slot :name="hasCustom ? 'custom' : null"></slot> ❌（null 不合法）