默认插槽是Vue 3中最常用、最轻量的内容分发方式，通过默认内容定义，父组件直接在子组件标签内嵌套内容即可替换默认内容，且仅允许一个无名slot。

Vue 3 中默认插槽是最常用、最轻量的内容分发方式，适用于子组件只需一个内容插入点的场景。它不需要命名，直接用 定义，父组件把内容写在子组件标签内部即可生效。

默认插槽怎么定义和使用

在子组件模板中，用空的 <slot></slot> 或带默认内容的 <slot>默认内容</slot> 标记内容出口位置：

• 如果父组件没传内容，就显示插槽里的默认文本（比如“暂无内容”或占位结构）
• 如果父组件写了嵌套内容，就会完全替换掉插槽标签及其默认内容
• 注意：<template></template> 标签包裹默认插槽内容是多余的，不加 v-slot 时直接写在子组件标签内就行

默认插槽的典型写法示例

子组件 Card.vue：

<template>
  <div class="card">
    <slot>这里是卡片默认文案</slot>
  </div>
</template>

父组件中两种用法：

立即学习“前端免费学习笔记（深入）”；

Springboot Vue Builder

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

下载

• 不传内容 → 显示“这里是卡片默认文案”
• 传内容 → 比如 <card><h3>我的标题</h3> <p>正文段落</p></card>，整个 <h3></h3> <p></p> 结构会渲染进 <slot></slot> 位置

默认插槽的常见注意事项

几个容易踩坑的点要留意：

• 子组件里只能有一个无名 <slot></slot>，否则后一个会覆盖前一个（Vue 不允许多个默认插槽）
• 父组件中不能对默认插槽使用 v-slot:default（虽然语法合法，但属于冗余写法，直接嵌套更清晰）
• 默认插槽可以接收任意 HTML 片段、组件、甚至带响应式逻辑的模板，灵活性高但需注意作用域限制（不传 props 或事件时，父组件上下文直接可用）

什么时候该用默认插槽而不是 props

当你要传递的是结构化模板而非纯数据时，默认插槽更合适：

• 比如卡片里要塞一段带样式的富文本、一个按钮组、或一个动态列表——这些用字符串 props 很难维护
• 而像标题文字、描述摘要这类简单文本，用 props 更语义清晰、类型安全（尤其配合 TypeScript）
• 实际项目中常组合使用：props 控制行为（如是否显示边框），默认插槽控制主体内容展示