Vue 3 中动态插槽名正确写法是 v-slot:[slotName]，其中 slotName 为响应式变量；Vue 2.6+/3 兼容方案可用 slot 属性配合 v-if；高阶场景可用 结合插槽函数实现完全动态渲染。
Vue 中插槽的动态名称不能直接用 v-slot:[name] 这种写法（它只支持静态字符串），但可以通过 作用域插槽 + 动态绑定插槽名 的方式实现——核心是利用 <component></component> 和 v-slot 的组合，或在父组件中用 slot 属性配合 name 动态传入。
✅ 正确写法：用 v-slot 配合变量名（Vue 3 推荐）
在 Vue 3 中，v-slot 支持动态参数语法：v-slot:[slotName]，但 slotName 必须是一个响应式变量（ref 或 reactive），且值为字符串：
- 子组件中正常定义具名插槽：
<slot name="header"></slot> - 父组件中使用动态插槽名：
<mycomponent><template v-slot:>内容</template></mycomponent> -
注意：必须用
v-slot:（不能省略冒号），且括号内是 JS 表达式，不是字符串字面量
✅ 兼容写法：Vue 2.6+ / Vue 3 均可用的 slot 属性（仅限编译时静态插槽）
如果只是想让父组件「告诉子组件该渲染哪个插槽」，可以用 slot 属性 + v-if 切换：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 子组件中：
<slot name="header" v-if="activeSlot === 'header'"></slot> - 父组件传参：
<mycomponent :active-slot="'footer'"></mycomponent> - 本质是条件渲染多个插槽，适合 slot 名有限、可枚举的场景
✅ 高阶技巧：用 <component :is></component> + 插槽函数动态挂载（适合插槽内容完全动态）
当插槽内容本身也要按类型动态生成（比如根据配置渲染不同区域），可在子组件中接收一个插槽函数（render function），再用 <component :is></component> 渲染：
立即学习“前端免费学习笔记（深入）”；
- 父组件传一个函数：
:render-slot="() => h('div', '动态内容')" - 子组件中：
<component :is="renderSlot"></component> - 或更灵活地结合
defineSlots（Vue 3.3+）和slots对象做运行时判断
⚠️ 常见误区提醒
-
v-slot:['header']❌ 错误：单引号导致变成字符串字面量，不是响应式变量 -
v-slot:header✅ 静态写法；v-slot:[headerSlot]✅ 动态写法（headerSlot 是 ref） - 动态插槽名不支持表达式计算（如
v-slot:[type + '-content']），需提前计算好并赋值给响应式变量 - 服务端渲染（SSR）中动态插槽名需确保服务端与客户端一致，否则可能 hydration 失败
