slot是父定义、子渲染的内容片段，本质为返回vnode数组的运行时函数；需通过slots对象、作用域插槽及render函数精准控制其接收、判断、组合与动态渲染逻辑。
Vue 中的 Slot 节点本身不是“传递”的数据，而是由父组件定义、子组件负责渲染的内容片段。真正要掌握的是：如何在子组件中接收、判断、组合甚至动态控制 slot 的渲染逻辑——这离不开对 slots 对象、作用域插槽（scoped slots）、以及渲染函数（render）或 <template></template> 语法的精准理解。
slot 是运行时的函数，不是静态 DOM
在 Vue 3 Composition API 或 Options API 的 setup / render 函数中，slots 是一个对象，其每个属性（如 default、header）都是返回 VNode 数组的函数。它只在渲染阶段执行，且可接收参数（作用域插槽）。
- 默认插槽：用
slots.default?.()获取渲染结果（注意可选链） - 命名插槽：如
slots.footer?.()，不存在时返回undefined，不调用则不会触发副作用 - 作用域插槽：如
slots.item?.({ data: item, index })，子组件主动传入上下文供父组件消费
用渲染函数精细控制 slot 渲染逻辑
当模板语法不够灵活（比如条件包裹、多次复用、动态 slot 名称），直接写 render() 最清晰：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
export default {
setup(props, { slots }) {
return () => {
const headerVNodes = slots.header?.() || [];
const bodyVNodes = slots.default?.() || [];
return h('div', { class: 'card' }, [
headerVNodes.length > 0 && h('header', headerVNodes),
h('main', bodyVNodes),
slots.footer && h('footer', slots.footer())
]);
};
}
};
注意：h 是 Vue 提供的渲染函数，slots.xxx() 返回的是 VNode 数组，可直接拼接、过滤、映射，甚至用 cloneVNode 修改 props。
在 setup 中安全访问和透传 slot
若子组件只是“中转站”，需把父级 slot 原样或稍作包装后交给更深层子组件（如高阶布局组件），推荐用 v-slots 指令（Vue 3.3+）或手动透传：
- 简单透传：在模板中直接写
<child v-slots="slots"></child>（自动映射所有插槽） - 手动透传：在
render中用slots.default?.()获取再传给下级h(Child, { ... }, { default: () => slots.default?.() }) - 条件性透传：例如仅当有
slots.actions时才渲染操作栏区域，避免空 DOM 节点
避免常见陷阱
Slot 不是响应式数据，但它的内容可能依赖响应式状态。关键点在于：
- 不要在
setup同步代码里调用slots.xxx()—— 此时还未进入渲染上下文，会报错或返回空 - 不要用
v-if直接包裹<slot name="xxx"></slot>来控制显示；应改用v-if="!!slots.xxx"判断是否存在，再决定是否渲染整个区域 - 作用域插槽传参时，确保传入的是原始值或计算属性，而非直接解构响应式对象（防止丢失响应性）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
