vue插槽（slots）是原生内容分发机制，支持匿名、具名、作用域三种形式：匿名插槽用接收未命名内容，具名插槽通过name属性与#name匹配，作用域插槽由子组件绑定数据、父组件用v-slot="{ prop }"解构使用。
Vue 模板语法本身不叫“插槽逻辑”，它原生就叫插槽（Slots）——不是“类似 React”，而是 Vue 早于 React 的现代插槽设计（受 Web Components 启发并拓展），且更成熟、语义更清晰。真正需要进阶的，是理解如何在 render 函数中手动实现插槽的完整能力，尤其是模板里自动完成、而 render 中必须显式处理的部分。
插槽在模板中怎么用：简洁即强大
Vue 模板里的插槽天然支持匿名、具名、作用域三种形式，无需额外逻辑：
-
匿名插槽：
<slot></slot>接收父组件未命名的内容，如<mybutton>点击我</mybutton> -
具名插槽：用
name区分位置，子组件写<slot name="header"></slot>，父组件用<template>...</template> -
作用域插槽：子组件通过
<slot :item="row"></slot>向外传数据，父组件用<template item>{{ item.name }}</template>解构使用
Render 函数中访问插槽：不能自动，必须显式
模板里 $slots 是隐式注入的，但 render 函数中必须手动读取和渲染。Vue 3 的 setup() + h 写法下，插槽是响应式对象：
-
this.$slots.default（Vue 2）或slots.default()（Vue 3 Composition API）返回 VNode 数组，可直接传给h() - 具名插槽同理：
slots.header()、slots.footer() - 作用域插槽需调用并传参：
slots.actions && slots.actions({ item: rowData })
示例（Vue 3）：
Render 中模拟 v-if / v-for / v-model：用 JS 替代指令
模板指令在 render 函数里不存在，必须用 JavaScript 逻辑替代：
-
v-if → 用
if/else或三元表达式控制返回哪个h()调用 -
v-for → 必须用
.map()遍历数据，每个项返回一个h()，再组合成数组传入父节点 -
v-model → 手动绑定
valueprop + 监听input或update:modelValue事件，触发emit
例如动态列表：
return () => h('ul', props.items.map(item =>h('li', { key: item.id }, item.text)
))
为什么需要 Render 函数进阶：性能与灵活性的临界点
多数场景用模板完全够用。render 函数的价值体现在：
- 需要细粒度控制渲染时机（比如跳过某些子树更新）
- 构建高复用 UI 库组件（如表格、表单生成器），需动态组合插槽、属性、事件
- 与 JSX 或 TSX 混合开发，逻辑复用更自然
- 规避模板编译限制（比如动态 tag 名、运行时决定结构）
它不是“更高级的写法”，而是“更底层的控制权”。用不用，取决于你是否真的需要绕过模板抽象层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
