Vue插槽是父组件向子组件注入模板片段的机制，解决结构复用问题；默认插槽提供单一内容入口，具名插槽支持多区域精准投放，二者可混合使用，插槽内容在父组件作用域编译。

Vue插槽不是传数据，而是让父组件把模板片段“塞进”子组件预留的位置。它解决的是结构复用问题——子组件管布局和逻辑，父组件决定填什么内容。

默认插槽：一个灵活的内容入口

适合卡片、弹窗、容器类组件，只要求中间区域可变。

• 子组件用定义接收点，里面写后备内容（如暂无内容），父组件不传时就显示它
• 父组件直接在子组件标签内写内容，就会被自动注入到位置，比如

  自定义文本

• 插槽内容在父组件作用域编译，能访问父组件的data、methods，但拿不到子组件内部变量
• 一个子组件只建议设一个默认插槽，避免语义不清

具名插槽：多区域精准投放

当组件有头部、主体、侧边栏、底部等多个可定制区域时使用。

Springboot Vue Builder

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

下载

• 子组件用、等命名区分位置
• 父组件必须用或投递对应内容，不能直接写在子组件标签里
• 未被匹配的具名插槽会留空；没用上的会被忽略
• 每个具名插槽也能设后备内容，比如© 2026

插槽组合与实用细节

真实项目中常混合使用，默认插槽和具名插槽可以共存，还能嵌套使用。

• 子组件里可以同时有（默认）和（具名），父组件既可传默认内容，也可用#header指定头部
• 插槽内支持任意合法模板：文本、HTML、其他组件、带@click的按钮，甚至另一个带插槽的组件
• 后备内容不限于文字，可以是复杂结构，比如
  

  暂无数据

• 注意作用域边界：插槽里的{{ count }}始终读父组件的count，哪怕子组件也有同名变量

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