动态插槽名使用v-slot:[slotName]语法，slotName须为响应式字符串变量或计算属性，支持拼接如item-${index}，Vue 3.1+支持三元运算符，需与子组件slot name严格匹配，避免undefined或空字符串。
动态插槽名直接用方括号语法 v-slot:[slotName]，其中 slotName 是一个响应式变量或计算属性，值为字符串（如 "header"、"footer"），Vue 会自动解析并匹配对应具名插槽。
基础写法：用变量控制插槽名
在模板中，把插槽名包裹在方括号里，确保变量是响应式的：
<my-component>
<template v-slot:[currentSlot]>
这里渲染动态插槽内容
</template>
</my-component>
注意：变量 currentSlot 必须是字符串类型，不能是 undefined 或空字符串，否则会报错或不生效。
- 推荐在
data或setup中定义为响应式变量（如ref('header')或computed(() => config.type + 'Content')） - 支持拼接，比如
v-slot:[`item-${index}`]，适合列表中按索引切换插槽 - 不支持表达式语句（如
v-slot:[isActive ? 'active' : 'default']），但支持三元运算符（Vue 3.1+ 支持，需确保语法合法）
配合配置驱动：根据 schema 渲染不同插槽
常见于低代码/表单/卡片组件中，通过 JSON 配置决定显示哪个插槽：
// 配置项示例
const layoutConfig = {
header: { type: 'title', title: '用户信息' },
body: { type: 'form' },
footer: { type: 'buttons' }
}
在组件中遍历配置，动态挂载插槽：
<my-layout :config="layoutConfig">
<template v-for="(cfg, slotKey) in layoutConfig" :key="slotKey" v-slot:[slotKey]>
<component :is="getComponentByType(cfg.type)" :config="cfg" />
</template>
</my-layout>
-
v-for和v-slot:[xxx]可以一起用，但必须加:key -
getComponentByType是一个返回组件对象的函数（可用resolveComponent或映射表） - 插槽名（
slotKey）需与子组件中<slot name="xxx">的 name 严格一致
进阶技巧：插槽名动态 fallback 与条件判断
当配置缺失某插槽时，可提供默认行为：
- 用计算属性做兜底：
computed(() => config.slot || 'default') - 结合
v-if控制是否渲染该插槽块：<template v-if="config.header" v-slot:header>...</template> - 避免插槽名为空：在绑定前校验
v-slot:[validSlotName || 'default']，防止运行时报错 - 支持插槽名带短横线（kebab-case）：变量值写成
'user-info'即可，无需驼峰转换
注意事项与避坑点
动态插槽名看似灵活，但容易出错：
- 父组件传了
v-slot:[xxx]，但子组件没定义对应<slot name="xxx">→ 内容被丢弃，无警告 - 变量响应式失效（比如用普通对象属性）→ 插槽名不会更新，建议统一用
ref或computed - SSR 场景下，服务端预渲染时变量未就绪 → 建议初始化时给默认值，或用
v-if延迟渲染 - Vue 2 不支持动态插槽名（仅 Vue 3.1+），若用 Vue 2 需改用作用域插槽 + 条件渲染模拟
