Vue插槽怎么用？组件内容分发教程

Vue插槽是一种强大而灵活的模板级内容分发机制，它让父组件能将任意结构的内容（文本、HTML、组件甚至带指令的复杂逻辑）精准注入子组件预留的“入口”，而非用于数据通信；从最简默认插槽（支持后备内容）、到通过name属性实现多区域定制的具名插槽，再到可将子组件内部数据反向传递给父组件渲染的作用域插槽，三类插槽层层递进，覆盖布局容器、列表、表单等高频复用场景——掌握它们，你就能写出真正高内聚、强扩展、语义清晰的可组合Vue组件。

Vue插槽（Slot）本质是子组件预留的内容“入口”，父组件传什么，它就渲染什么——不是父子通信，也不是数据传递，而是模板级的内容分发机制。

默认插槽：最常用、最直接的占位方式

子组件用一个无名 定义接收位置，父组件在标签内写内容，就会自动填进去。

它支持后备内容：在 默认文案 中写文字或 HTML，当父组件没传任何内容时，这部分就会显示。

• 子组件中只能有一个默认插槽逻辑上最清晰；多个默认插槽会导致内容重复渲染，容易出错
• 父组件传入的内容保持原有作用域——能访问父组件的 data、methods、计算属性，但无法读取子组件内部的数据
• 传入内容可以是纯文本、HTML 标签、其他组件，甚至带 v-if / v-for 的复杂结构

具名插槽：给不同位置起名字，精准投递

当一个组件需要多个可定制区域（比如页头、主体、页脚），就用 name 属性区分插槽：

子组件里写：、、还有一个没 name 的就是默认插槽。

父组件对应使用：、，中间不加 template 的内容进默认插槽。

• v-slot 缩写为 # 是推荐写法，比如 #header、#default
• 所有具名插槽内容必须包裹在