渲染函数中的 slots 分发：Vue 是如何处理插槽渲染的

Vue渲染函数中插槽本质是运行时动态执行的函数，slots为对象，各属性为返回VNode的函数；调用如slots.default()获取内容，空插槽返回空数组或null；作用域插槽通过函数参数传递数据，插槽内容保持父组件作用域。

Vue 在渲染函数中处理插槽，本质是把插槽内容作为函数参数传入子组件的渲染逻辑，而不是像模板那样靠编译器静态解析。它不走“编译时提取 + 插入 DOM”那一套，而是运行时动态执行。

插槽在渲染函数里就是函数

在 setup 或 render 函数中，slots 不是 HTML 字符串，也不是 VNode 数组，而是一个对象，每个属性（如 default、header）都对应一个返回 VNode 的函数。调用它，才真正生成要渲染的内容。

• 父组件传入的插槽内容，会被 Vue 编译成一个函数，挂载到 slots 对象上
• 子组件的 render 函数里，直接调用 slots.default() 或 slots.header() 即可获得对应内容的 VNode
• 即使插槽为空（父组件没传内容），slots.xxx 仍是函数，只是调用后返回空数组或 null

作用域插槽的数据传递靠闭包和参数

作用域插槽在渲染函数中体现得最清晰：子组件把数据作为参数传给插槽函数，父组件通过解构接收。

• 子组件 render 中写：slots.default({ item, index })
• 父组件定义插槽时，实际是提供一个接收 { item, index } 的函数：default: ({ item }) => h('li', item.name)
• 这个过程不依赖响应式代理或 props，纯粹是 JavaScript 函数调用 + 参数传递

默认插槽与具名插槽的调用方式一致

无论默认还是具名，都是 slots 对象上的方法，区别只在 key 名：

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

• slots.default() —— 对应无 name 的 或 v-slot:default
• slots.header() —— 对应 <slot name="header"></slot> 或 v-slot:header
• 如果父组件没传某个具名插槽，slots.footer 仍存在，但调用后返回空，不会报错

插槽内容保持父组件作用域

这是关键点：插槽函数内部的响应式变量、计算属性、methods 都来自父组件上下文。

• 哪怕你在子组件 render 里调用 slots.default()，里面访问的 count 或 getName() 仍是父组件的
• 子组件无法“注入”自己的 data 到插槽函数里——除非显式作为参数传出去（即作用域插槽）
• 这也意味着插槽内容不能直接读取子组件的 ref 或 reactive 数据，除非通过作用域方式暴露