v-slot 必须写在 标签上，因其是作用域声明指令，需无渲染的容器承载插槽内容及上下文； 为编译时占位符，不生成 dom，可无副作用包裹内容并准确传递作用域。

Vue 中 v-slot 必须写在 <template></template> 标签上，不是语法限制的“任性”，而是设计逻辑决定的——它本质是作用域声明指令，需要一个纯粹的、不渲染的容器来承载插槽内容及其作用域上下文。

v-slot 为什么必须用 template

• <template></template> 是 Vue 的编译时占位符，不会生成真实 DOM 节点，只用于组织结构和声明逻辑
• v-slot 携带的作用域信息（如 v-slot:header="props"）需要绑定到一个明确的“作用域边界”，而普通 HTML 标签（比如 <div> 或 <code><h3></h3>）本身会渲染成 DOM，且可能带有自己的 props、事件或指令，容易引发语义冲突或作用域污染
• Vue 编译器把 v-slot 当作插槽内容的封装单元，只有 <template></template> 能无副作用地包裹任意内容并准确传递作用域，确保子组件拿到的是干净、可预测的渲染函数

✅ 正确：

<mycomponent><template><h2>标题区域</h2>
  </template><template><p>默认内容</p>
  </template></mycomponent>

❌ 错误（即使能运行，也属非规范，Vue3 报 warning）：

<mycomponent><div> <!-- ❌ 不合法：#header 是 v-slot 缩写，不能直接挂 div 上 -->
    <h2>标题</h2>
  </div>
</mycomponent>

规范写法避坑要点

• 缩写 #name 只能用于具名插槽，且 # 后必须有值

  • #header ✅
  • # ❌（语法错误）
  • #default ✅（显式声明默认插槽）
  • 省略 #default 时，直接把内容写在组件标签内即可，但此时不能混用 #xxx 和裸内容（易导致分发错乱）

• 一个组件标签内，最多只能有一个未包裹的默认插槽内容

  • 如果写了 <template></template>，又在同级写了 <p>文字</p>，那 <p></p> 会被自动归入 #default
  • 但不能再同时写 <template></template>，否则报错：“Duplicate slot declaration”

• 作用域插槽中，解构需谨慎

  • v-slot:footer="{ data, loading }" ✅（推荐：明确需要的字段）
  • v-slot:footer="slotProps" ✅（通用接收）
  • v-slot:footer="{ ...rest }" ❌（对象展开在模板中不支持，会报错）

• CSS 作用域注意：插槽内容样式由父组件控制

  • 插槽内容渲染在父组件作用域，所以 <style scoped></style> 写在父组件里才影响插槽内容
  • 子组件的 <style scoped></style> 不会穿透到插槽内容上（这是预期行为，不是 bug）

• 不要在动态组件 <component :is="..."></component> 外层直接用 v-slot

  • 必须确保 v-slot 的直接父元素是具名插槽的宿主组件
  • 错误示例：

    <component :is="currentTab"><template>...</template><!-- ❌ currentTab 可能不是含 content 插槽的组件 --></component>

  • 正确做法：先确定组件类型，再嵌套使用，或用 <keep-alive></keep-alive> + 显式组件名包装

不复杂但容易忽略。