其实，

很多人学 Vue 的时候。slot 这一关过得不太踏实。语法看懂了但心里总有个疑问：我直接多传几个 props 不也能实现吗，为什么要用 slot？

这篇文章不讲具体语法，只讲设计理念。把这个想清楚了slot 自然就会用了。说起来，

一、先从 Props 的边界说起

Props 是 Vue 组件通信最基础的方式。父组件把数据传给子组件，子组件负责渲染。

这在大多数场景下够用。比如一个使用者卡片组件，不同地方用，只是名字、头像、年龄不同。结构完全一样——用 props 传数据就行，没什么问题。

但假设你有一个弹窗组件。

弹窗的边框、遮罩、关闭按钮、动画——这些是固定的，封装成组件合情合理。但弹窗里面的内容呢，有时候是一个表单，有时候是一段提示文字，有时候是一张图片。

这时候 props 就撑不住了。 你开始往组件里加各种控制参数：

props: { showForm: Boolean,showImage: Boolean,imageUrl: String。formType: String,showConfirmButton: Boolean,// ... 越加越多}

写着写着你会发现，这条路越走越窄。其实，props 只能传数据控制不了结构。你想在弹窗里放一个复杂的自定义排版，props 根本表达不了。说起来，

这就是 slot 要解决的问题：让父组件能向子组件注入 UI 结构。而不只是数据，按理说，

二、相框的比喻

理解 slot。有一个很直观的比喻：相框。

• 相框本身是固定的 → 子组件负责
• 相框里放什么照片 → 父组件决定

Slot 就是相框中间那个空洞。子组件说这方面，「我这里留了个位置，你来填。从」父组件说来看，「好，我填这个。其实，」

弹窗组件用 slot 改造后：

 标题    
... 

子组件只有一份。父组件各自填各自的内容，互不干扰。

三、具名插槽：留多个洞

有时候一个组件需要在不同位置留多个洞。比如一个卡片组件，顶部区域、内容区域、底部操作区各不相同。