Vue 3 动态插槽名通过 :name 绑定响应式变量实现，子组件用 :name="slotName" 匹配父组件 v-slot:[dynamicName] 提供的内容，支持运行时切换，适用于配置驱动或通用容器场景。
Vue 3 中实现动态插槽名，核心是用 :name 绑定一个响应式变量，让 <slot></slot> 的名称可运行时变化。它不是“切换多个 slot 标签”，而是让同一个 slot 出口根据变量值自动匹配父组件中对应名称的内容。
动态插槽名的写法（子组件）
在子组件中，把 name 属性改为绑定形式：
- 使用
:name="slotName"，其中slotName是 ref 或 reactive 响应式变量 - 该 slot 会尝试匹配父组件中
v-slot:[slotName]或#[slotName]提供的内容 - 若匹配不到，就显示 slot 内部的默认内容（如有）
父组件如何配合（关键细节）
父组件必须用动态语法声明插槽内容，不能写死名称：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 用
<template v-slot:></template>或简写<template></template> -
dynamicName必须是响应式变量（如ref('header')），且和子组件绑定的变量逻辑联动 - 支持在
setTimeout、watch或事件回调中修改该变量，实现运行时切换
常见误区与替代方案
容易混淆的是“条件渲染多个 slot”——比如用 v-if="active === 'header'" 控制多个具名 slot 显示。这不是动态插槽名，只是手动开关；它适合 slot 名固定、数量少的场景。而真正的动态插槽名适用于：
立即学习“前端免费学习笔记（深入）”；
- 插槽名由配置项、路由参数、用户选择等外部输入决定
- 需要一套通用容器组件，适配不同业务模块的任意命名区域（如 dashboard 布局）
- 避免在子组件里硬编码一堆
v-if，保持结构简洁
一个小而完整的例子
子组件中：<slot :name="currentArea">暂无内容</slot>
父组件中：<template><p>这是 {{ currentArea }} 区域</p></template>
只要 currentArea.value = 'sidebar'，内容就自动渲染到 sidebar 插槽位置。
