v-if 不能直接作用于 <slot> 标签，否则插槽内容无法被编译和传递；正确做法是将 v-if 移至外层容器或由父组件控制条件渲染。

Vue.js 中使用 v-if 控制插槽（slot）内容的渲染时，容易出现“插槽占位消失”或“条件不生效”的问题——本质是 v-if 作用在了插槽容器上，而非插槽内容本身，导致父组件传入的 slot 没有被正确接收或渲染。

插槽本身不支持 v-if 直接控制渲染逻辑

插槽内容由父组件决定，子组件中用 <slot> 只是“出口”，不是“容器”。若你在子组件里这样写：

<slot v-if="showHeader"></slot>

这不会按预期只渲染 header 插槽，而是整个 <slot> 元素被移除（因为 v-if 作用于 slot 标签本身），父组件传入的内容根本不会被编译和传递进来。

正确做法：把 v-if 移到插槽内容的外层容器上

想实现“有条件地显示某段插槽内容”，应在父组件中控制，或在子组件中用具名插槽 + 条件包装器：

立即学习“前端免费学习笔记（深入）”；

• 推荐方案（父组件控制）：让父组件根据条件决定是否传入插槽内容
• 替代方案（子组件封装）：用一个带 v-if 的 wrapper 包裹 <slot name="header">，而不是直接加在 <slot> 上

例如子组件中：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

<div v-if="showHeader">
  <slot name="header"></slot>
</div>

这样 <slot name="header"> 始终存在、始终被解析，只是它的外层容器按需渲染 —— 插槽内容能正常注入。

作用域插槽 + v-if 的注意事项

当使用作用域插槽（如 <slot name="item" :data="item"></slot>）并配合 v-if 时，确保判断逻辑不依赖未定义的插槽数据。常见错误：

<slot name="item" v-if="item.id" :data="item"></slot>

这里 v-if="item.id" 若在插槽未传入前执行，可能报错。应改用安全访问或默认值：

<slot name="item" v-if="item?.id" :data="item"></slot>

或在 data 提供默认结构，避免运行时异常。

动态插槽名与 v-if 组合要谨慎

用 [name]="slotName" 动态绑定插槽名时，v-if 应作用于整个插槽区块，而非插槽名表达式内部：

• ✅ 正确：<slot v-if="hasCustom" :name="customSlotName"></slot>
• ❌ 错误：<slot :name="hasCustom ? 'custom' : null"></slot>（null 不合法，会警告）

动态插槽名必须为字符串，且最好配合 v-if 显式控制是否渲染该插槽分支。