Vue 词条目录
前端Wiki/词条/插槽 slot

插槽 slot

定义让父组件向子组件模板中填充内容的占位机制,是组件内容分发的标准方案

插槽像是子组件模板里预留的坑位:子组件用 slot 标签占位,父组件在调用时把内容塞进去,从而实现高度可定制的组件。基础插槽直接填充默认位置;具名插槽用 v-slot:name 或 #name 指定多个坑位;作用域插槽则让子组件把数据通过绑定属性回传给父组件,由父组件决定渲染成什么样子。

写列表组件、卡片、弹窗这类外壳组件时插槽几乎是必选项:外壳管布局与样式,内容由调用方通过插槽决定。默认插槽可写 fallback 内容,没有传入时自动兜底显示。作用域插槽理解门槛稍高,但一旦掌握就能写出极其灵活的表格、瀑布流等通用组件。

HTML
<!-- 子组件 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>
⚠ 常见误区
🔗 相关词条插槽 slot组件与 props
← 返回来源章节插槽 slot