Vue插槽不执行条件判断，动态渲染需父组件控制逻辑、子组件配合暴露状态或插槽名，核心是“逻辑在父，出口在子”；支持v-if控制内容显示、动态插槽名绑定、作用域插槽传状态及组合使用。
Vue插槽本身不执行条件判断，动态渲染必须靠父组件控制逻辑、子组件配合暴露状态或插槽名，核心是“逻辑在父，出口在子”。
用 v-if 控制插槽内容的显示
插槽内容始终在父组件作用域中编译，所以直接在 <template v-slot> 外层加 v-if 最自然有效：
<template v-slot:header v-if="showHeader">自定义头部</template><template v-slot:default>{{ isLoading ? '加载中...' : user.name }}</template>- 若整个插槽区域需统一开关（比如无数据时隐藏全部），可在子组件中用
<slot v-if="hasContent"></slot>，再配默认 fallback（如<div v-else>暂无数据</div>）
用动态插槽名匹配不同业务场景
当配置项决定该渲染哪个插槽（如表单字段类型、卡片布局模式），用 v-slot:[slotName] 动态绑定插槽名：
- 子组件定义多个具名插槽：
<slot name="input"></slot>、<slot name="select"></slot>、<slot name="date"></slot> - 父组件根据字段类型变量自动挂载：
<template v-slot:[field.type]>...</template>，其中field.type是响应式字符串（如ref('select')） - 支持拼接：
v-slot:[`item-${index}`]，适合列表中每个条目使用独立插槽 - 注意：值不能为
undefined或空字符串，否则插槽不生效
用作用域插槽传递状态，由父组件做条件分支
当插槽内容需依赖子组件内部状态（如加载中、校验失败、权限不足），子组件通过作用域插槽把状态“抛出来”，父组件接收后决定怎么渲染：
立即学习“前端免费学习笔记（深入）”；
- 子组件：
<slot :loading="isLoading" :error="errorMsg" :canEdit="userHasEditPerm"></slot> - 父组件：
<template #default="{ loading, error, canEdit }"> <div v-if="loading">转圈</div> <div v-else-if="error">{{ error }}</div> <input v-else :disabled="!canEdit" /> </template> - 这样既保持子组件纯净，又让父组件拥有完整渲染控制权
组合使用更贴近真实业务
实际项目中常混合使用。例如一个数据卡片组件：
- 子组件提供
header、body、footer三个具名插槽，并暴露:status="currentStatus"作为作用域属性 - 父组件根据
config.layout动态选择插槽名：v-slot:[config.layout] - 同时用
v-slot="{ status }"接收状态，在插槽内容里加v-if="status === 'success'"
不复杂但容易忽略：所有条件逻辑都落在父组件模板或 script 中，子组件只负责定义出口和传参。
