插槽解决什么问题？

插槽是父组件提供一段模板，由子组件决定放在哪。子组件管结构和行为，父组件管这块区域里具体渲染什么。需要子组件把数据交回这段模板时，用作用域插槽。

原理

默认插槽接收父组件写在标签之间的内容。具名插槽用 <template #header> 区分位置。子组件用 <slot name="header"> 标出出口，并可以写后备内容。

作用域插槽里，子组件把对象传给插槽，父组件的模板参数接收它：

vue

<slot :item="item" />

vue

<List v-slot="{ item }">{{ item.name }}</List>

这和 props 的方向相反：数据从子到父的模板，但渲染仍发生在父组件的作用域里，父组件能访问自己的变量。

插槽内容的样式和数据属于父组件。不要假设子组件能用选择器随便改到插槽里的结构。

和 props 怎么选？

内容是文本、配置、回调，用 props。内容是一段结构不固定的标记，用插槽。既要结构自由、又要用到子组件内部的行数据，用作用域插槽。

v-slot 能写在组件上吗？

只有默认插槽时可以写在组件标签上。有多个具名插槽时，用内部的 template。