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 插槽位置。

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