Vue 插槽详解教程：从基础到高级应用

最新推荐文章于 2026-04-10 19:00:06 发布

原创最新推荐文章于 2026-04-10 19:00:06 发布 · 793 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端 #插槽

前端专栏收录该内容

122 篇文章

订阅专栏

一、什么是Vue插槽？

Vue 插槽(Slot)是Vue提供的一种强大且灵活的机制，用于实现父组件向子组件传递一段模板内容(HTML/组件等)，让子组件在指定位置动态渲染这些内容。

可以把插槽理解为：

子组件定义了一个"内容占位符"
父组件可以在使用子组件时，往这个占位符里插入自定义内容

插槽的核心价值在于解决组件化开发中的内容动态化问题，当封装可复用组件(如Card卡片、Button按钮、Modal弹窗、Layout布局等)时，组件内部某些部分的内容可能不固定，使用插槽可以让组件更加灵活和可复用。

二、插槽的基础用法

1. 默认插槽(匿名插槽)

最简单的插槽形式，也称为匿名插槽。

子组件定义(ChildComponent.vue):

<template>
  <div class="card">
    <h3>这是一个卡片标题</h3>
    <!-- 插槽占位符：父组件可以在这里插入任意内容 -->
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}
</style>

父组件使用:

<template>
  <ChildComponent>
    <!-- 这里的内容会被插入到子组件的<slot>位置 -->
    <p>这是父组件传入的内容，会显示在子组件的插槽位置！</p>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

特点：

子组件使用<slot></slot>标签定义插槽位置
父组件在子组件标签内写入的内容会替换插槽位置
如果父组件不提供内容，插槽位置将为空(可设置默认内容)

带默认内容的默认插槽:

<!-- 子组件 -->
<template>
  <div class="child">
    <h2>子组件标题</h2>
    <slot>这是默认内容（当父组件未填充时显示）</slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <p>这是父组件传递的内容，会替换默认插槽</p>
  </ChildComponent>
</template>

2. 具名插槽(Named Slots)

当一个组件中有多个插槽位置时，我们需要给每个插槽起个名字，这就是具名插槽。

子组件定义(BaseLayout.vue):

<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽，可省略name -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件分发内容:

<template>
  <LayoutComponent>
    <template v-slot:header>
      <h1>页面标题</h1>
    </template>
    <!-- 默认插槽可简写为<template #default> -->
    <p>这是主内容区</p>
    <template v-slot:footer>
      <p>版权信息 © 2023</p>
    </template>
  </LayoutComponent>
</template>

简写语法：

v-slot:header 可简写为 #header(仅限具名插槽)
默认插槽简写：#default 或直接省略<template>标签(不推荐，可读性差)

简化写法示例:

<template>
  <LayoutComponent>
    <template #header>
      <h1>页面标题</h1>
    </template>
    <p>这是主内容区</p>
    <template #footer>
      <p>版权信息 © 2023</p>
    </template>
  </LayoutComponent>
</template>

三、作用域插槽(Scoped Slots)

当子组件需要向插槽内容暴露数据时，使用作用域插槽(Scoped Slots)，通过slot-props将数据传递给父组件。

1. 基本作用域插槽

子组件(DataList.vue):

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <!-- 将item作为slot-props传递给父组件 -->
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    };
  }
};
</script>

父组件接收数据并渲染:

<template>
  <DataList>
    <!-- 使用解构语法接收slot-props -->
    <template #default="{ item, index }">
      <span>{{ index + 1 }}. {{ item.name }}</span>
    </template>
  </DataList>
</template>

2. 作用域插槽的实际应用

状态显示组件(Modal.vue):

<template>
  <div class="modal" v-if="visible">
    <div class="modal-header">
      <slot name="header">
        <h3>默认标题</h3>
      </slot>
      <button @click="$emit('close')">×</button>
    </div>
    <div class="modal-body">
      <slot></slot>
    </div>
    <div class="modal-footer">
      <slot name="footer">
        <button @click="$emit('confirm')">确认</button>
      </slot>
    </div>
  </div>
</template>

<!-- 父组件自定义内容 -->
<template>
  <Modal v-model="showModal">
    <template #header>
      <h2>自定义标题</h2>
    </template>
    <p>这是模态框主体内容</p>
    <template #footer>
      <button @click="showModal = false">取消</button>
      <button @click="submit">提交</button>
    </template>
  </Modal>
</template>

表格组件(SmartTable.vue):

<!-- 父组件使用 -->
<template>
  <SmartTable>
    <template #status="{ row }">
      <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
        {{ row.status }}
      </el-tag>
    </template>
  </SmartTable>
</template>

四、高级插槽用法

1. 动态插槽名

通过v-slot:[dynamicName]实现动态分发插槽内容。

使用示例:

<template>
  <ChildComponent>
    <template v-slot:[currentSlot]>
      动态插槽内容
    </template>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      currentSlot: 'header' // 可动态修改为 'footer' 等
    };
  }
};
</script>

2. 解构默认值

当插槽属性可能为undefined时，可设置默认值。

使用示例:

<template #default="{ item = { name: '默认值' }, index = 0 }">
  {{ index }}: {{ item.name }}
</template>

3. 动态作用域插槽

结合计算属性或方法动态生成插槽内容。

使用示例:

<template>
  <DataList>
    <template #default="{ item }">
      <button @click="handleClick(item)">
        操作 {{ item.name }}
      </button>
    </template>
  </DataList>
</template>

<script>
export default {
  methods: {
    handleClick(item) {
      console.log('点击了:', item.name);
    }
  }
};
</script>

五、Vue 2与Vue 3插槽语法对比

Vue 2.x 插槽语法

默认插槽：

<!-- 子组件 -->
<slot>默认内容</slot>

<!-- 父组件 -->
<child-component>
  自定义内容
</child-component>

具名插槽：

<!-- 子组件 -->
<slot name="header"></slot>

<!-- 父组件 -->
<child-component>
  <template slot="header">
    头部内容
  </template>
</child-component>

作用域插槽：

<!-- 子组件 -->
<slot :user="user"></slot>

<!-- 父组件 -->
<child-component>
  <template slot-scope="props">
    {{ props.user.name }}
  </template>
</child-component>

Vue 3.x 插槽语法(推荐)

默认插槽：

<!-- 子组件 -->
<slot></slot>

<!-- 父组件 -->
<ChildComponent>
  自定义内容
</ChildComponent>

具名插槽：

<!-- 子组件 -->
<slot name="header"></slot>

<!-- 父组件 -->
<ChildComponent>
  <template #header>
    头部内容
  </template>
</ChildComponent>

作用域插槽：

<!-- 子组件 -->
<slot :user="user"></slot>

<!-- 父组件 -->
<ChildComponent>
  <template #default="{ user }">
    {{ user.name }}
  </template>
</ChildComponent>

Vue 3推荐使用v-slot语法，Vue 2.6+也支持此语法，Vue 3完全移除了slot-scope。

六、插槽的实际应用场景

1. 通用布局组件

PageLayout.vue:

<template>
  <div class="page">
    <slot name="sidebar"></slot>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<!-- 父组件使用 -->
<template>
  <PageLayout>
    <template #sidebar>
      <SidebarMenu />
    </template>
    <div>主内容区</div>
  </PageLayout>
</template>

2. 卡片组件

Card.vue:

<template>
  <div class="card">
    <slot name="header">
      <h3>默认标题</h3>
    </slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

3. 模态框组件

Modal.vue:

<template>
  <div class="modal" v-if="visible">
    <div class="modal-header">
      <slot name="header">
        <h3>默认标题</h3>
      </slot>
      <button @click="$emit('close')">×</button>
    </div>
    <div class="modal-body">
      <slot></slot>
    </div>
    <div class="modal-footer">
      <slot name="footer">
        <button @click="$emit('confirm')">确认</button>
      </slot>
    </div>
  </div>
</template>