Vue中的slot
Vue 插槽的职责、类型与组件组合中的使用边界。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 上位主题: vue3
- 相关概念: Vue中的props和emit
Vue中的slot
slot 是 Vue 提供的内容分发机制。它让父组件把一段模板内容交给子组件，在子组件预留的位置渲染出来。
一句话定义
如果 props 传的是数据，slot 更像传“可渲染的内容结构”。
它解决什么问题
- 组件需要保留外部内容插入点
- 组件既想封装结构，又不想把内容完全写死
- 组件库场景里需要更高的可组合性
三种最常见的插槽类型
默认插槽
子组件只留一个内容入口。
具名插槽
同一个组件里保留多个命名入口，例如 header、footer。
作用域插槽
子组件把自己的数据暴露给父组件，父组件决定怎么渲染。
最适合的场景
- 卡片
- 弹窗
- 表格列渲染
- 列表项渲染
- 布局组件
和 props 的边界
props更适合传值和配置slot更适合传结构和内容
常见误区
- 明明只是几个简单配置项，却硬上 slot
- 组件开放了太多 slot，导致接口变得难以维护
- 不区分默认插槽和作用域插槽的职责
最短记忆方式
slot 不是另一种传值方式，而是组件留给外部内容的插口。
面试要点
来自 vue-slot-interview-question 的面试视角整理。
一句话回答
props 更适合传数据和配置，slot 更适合把可渲染内容结构交给父组件决定，所以它们解决的是不同层级的问题。
最稳的回答主线
props：传值、传配置slot：传内容结构- 卡片、弹窗、表格列渲染、布局组件往往更适合
slot
最短记忆方式
props 传数据，slot 传内容结构。