Vue 3 中动态插槽名正确写法是 v-slot:[slotName]，其中 slotName 为响应式变量；Vue 2.6+/3 兼容方案可用 slot 属性配合 v-if；高阶场景可用 结合插槽函数实现完全动态渲染。

Vue 中插槽的动态名称不能直接用 v-slot:[name] 这种写法（它只支持静态字符串），但可以通过 作用域插槽 + 动态绑定插槽名 的方式实现——核心是利用 和 v-slot 的组合，或在父组件中用 slot 属性配合 name 动态传入。

✅ 正确写法：用 v-slot 配合变量名（Vue 3 推荐）

在 Vue 3 中，v-slot 支持动态参数语法：v-slot:[slotName]，但 slotName 必须是一个响应式变量（ref 或 reactive），且值为字符串：

• 子组件中正常定义具名插槽：
• 父组件中使用动态插槽名：
• 注意：必须用 v-slot:（不能省略冒号），且括号内是 JS 表达式，不是字符串字面量

✅ 兼容写法：Vue 2.6+ / Vue 3 均可用的 slot 属性（仅限编译时静态插槽）

如果只是想让父组件「告诉子组件该渲染哪个插槽」，可以用 slot 属性 + v-if 切换：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 子组件中：
• 父组件传参：
• 本质是条件渲染多个插槽，适合 slot 名有限、可枚举的场景

✅ 高阶技巧：用 + 插槽函数动态挂载（适合插槽内容完全动态）

当插槽内容本身也要按类型动态生成（比如根据配置渲染不同区域），可在子组件中接收一个插槽函数（render function），再用 渲染：

• 父组件传一个函数：:render-slot="() => h('div', '动态内容')"
• 子组件中：
• 或更灵活地结合 defineSlots（Vue 3.3+）和 slots 对象做运行时判断

⚠️ 常见误区提醒

• v-slot:['header'] ❌ 错误：单引号导致变成字符串字面量，不是响应式变量
• v-slot:header ✅ 静态写法；v-slot:[headerSlot] ✅ 动态写法（headerSlot 是 ref）
• 动态插槽名不支持表达式计算（如 v-slot:[type + '-content']），需提前计算好并赋值给响应式变量
• 服务端渲染（SSR）中动态插槽名需确保服务端与客户端一致，否则可能 hydration 失败

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！