vue插槽高度可定制化，核心是“留口方式”与“填口自由度”组合：具名插槽划分区域、作用域插槽传递状态、动态插槽名运行时切换、插槽函数配合实现完全动态渲染。
Vue 插槽内容的高度可定制化，核心在于“留口方式”和“填口自由度”的组合——不是只留一个洞，而是按需开多个洞、带数据的洞、甚至能动态换洞名的洞。
用具名插槽划分清晰区域
适合结构固定但各区域内容多变的组件，比如卡片、模态框、布局容器。
- 子组件中明确定义：
<slot name="header"></slot>、<slot name="main"></slot>、<slot name="footer"></slot> - 父组件用
<template></template>、<template></template>等分别注入，内容可以是组件、表单、带 v-if 的条件区块，甚至内嵌另一个使用插槽的子组件 - 不传某具名插槽时，它就为空；若想加默认文案，直接写成
<slot name="header">默认标题</slot>
用作用域插槽传递子组件状态
当父组件需要根据子组件内部数据来决定怎么渲染某一块内容时，作用域插槽是关键桥梁。
- 子组件在插槽上绑定属性：
<slot name="item" :item="currentItem" :index="i" :is-active="isActive"></slot> - 父组件解构接收：
<template item index isactive>{{ index }}. {{ item.name }} <span v-if="isActive">(当前)</span></template> - 注意：只传加工后的状态（如
isToday: true），别传原始对象（如new Date()），避免父组件重复逻辑
用动态插槽名实现运行时切换
适用于插槽入口不固定、由配置或用户行为决定的场景，比如仪表盘模块、可编辑布局区。
- Vue 3 中直接支持：
<template v-slot:>动态内容</template>，其中currentSlotName是 ref 字符串，例如ref('sidebar') - 必须用
v-slot:语法（不能省略冒号），括号内是 JS 表达式，不是字符串字面量 - 兼容 Vue 2.6+ / Vue 3 的降级方案：子组件用
v-if控制多个具名插槽显隐，父组件通过 prop 控制激活哪个，适合 slot 名有限且可枚举的情况
用插槽函数 + 实现完全动态内容生成
当插槽内容本身也要按类型实时构造（比如从 JSON 配置生成不同 UI 区块），普通插槽不够用，需升级为渲染函数。
- 父组件传一个函数：
:render-header="() => h('h2', '自定义头部')"或更复杂逻辑 - 子组件中：
<component :is="renderHeader"></component>，也可配合defineSlots（Vue 3.3+）做运行时 slots 对象判断 - 这种方式绕过模板编译限制，适合低代码、可视化搭建等高阶场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
