插槽像是子组件模板里预留的坑位:子组件用 slot 标签占位,父组件在调用时把内容塞进去,从而实现高度可定制的组件。基础插槽直接填充默认位置;具名插槽用 v-slot:name 或 #name 指定多个坑位;作用域插槽则让子组件把数据通过绑定属性回传给父组件,由父组件决定渲染成什么样子。
写列表组件、卡片、弹窗这类外壳组件时插槽几乎是必选项:外壳管布局与样式,内容由调用方通过插槽决定。默认插槽可写 fallback 内容,没有传入时自动兜底显示。作用域插槽理解门槛稍高,但一旦掌握就能写出极其灵活的表格、瀑布流等通用组件。
<!-- 子组件 Card.vue 的模板 --> <template> <div class="card"> <header><slot name="title">默认标题</slot></header> <main><slot>默认内容</slot></main> <footer><slot name="act" :row="item">操作</slot></footer> </div> </template> <!-- 父组件使用 --> <Card> <template #title>文章标题</template> <p>正文内容写在这里。</p> <template #act="{ row }"> <button @click="edit(row)">编辑</button> </template> </Card>