面试题：什么是 Vue 中的 slot？它有什么作用？

这是一个关于 Vue 组件化核心概念的重要面试题。以下是详细的解答：

什么是 Vue 中的 slot？

在 Vue.js 中，slot（插槽）是一种内容分发机制，它允许你像使用 HTML 元素一样，在父组件中向子组件“注入”或“传递”任意的内容（包括模板、HTML、组件等），而不仅仅是通过 props 传递数据。

你可以将 slot 想象成子组件模板中的一个“占位符”或“预留区域”。父组件可以决定在这个区域放置什么内容。

`slot` 有什么作用？

slot 的主要作用是提高组件的灵活性和复用性。它使得组件能够：

接收动态内容：子组件可以定义一个或多个“洞”（即 slot），父组件可以向这些“洞”中填充不同的内容。
实现内容分发（Content Distribution）：父组件的模板内容可以被分发到子组件的特定位置进行渲染。
构建可复用的 UI 模板：例如，可以创建一个通用的 <Card>、<Modal>、<Button> 或 <List> 组件，其外观和结构是固定的，但内部显示的内容由使用者决定。

`slot` 的类型和用法

1. 默认插槽（Default Slot / Anonymous Slot）

定义：子组件中只有一个 <slot></slot> 标签，没有 name 属性。
作用：父组件中写在子组件标签内的所有内容都会被分发到这个默认插槽中。
示例：

<!-- 子组件：Card.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot></slot> <!-- 默认插槽：接收父组件传递的内容 -->
    </div>
    <div class="card-body">
      这是卡片的主体内容。
    </div>
  </div>
</template>

<!-- 父组件中使用 -->
<template>
  <Card>
    <h3>这是卡片的标题</h3>
    <p>这是额外的描述信息。</p>
  </Card>
</template>

<!-- 渲染结果 -->
<div class="card">
  <div class="card-header">
    <h3>这是卡片的标题</h3>
    <p>这是额外的描述信息。</p>
  </div>
  <div class="card-body">
    这是卡片的主体内容。
  </div>
</div>

2. 具名插槽（Named Slot）

定义：当子组件需要多个插槽时，使用 name 属性为 <slot> 命名。
作用：父组件使用 v-slot:slotName（或简写 #slotName）指令来指定内容应该插入到哪个具名插槽。
示例：

<!-- 子组件：Layout.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- 父组件中使用 -->
<template>
  <Layout>
    <!-- 使用 v-slot 指定内容插入位置 -->
    <template v-slot:header>
      <h1>网站标题</h1>
    </template>

    <p>这是页面的主内容。</p>

    <template v-slot:footer>
      <p>版权信息 © 2025</p>
    </template>
  </Layout>
</template>

<!-- 简写语法（推荐） -->
<template>
  <Layout>
    <template #header>
      <h1>网站标题</h1>
    </template>

    <p>这是页面的主内容。</p>

    <template #footer>
      <p>版权信息 © 2025</p>
    </template>
  </Layout>
</template>

3. 作用域插槽（Scoped Slot）

定义：这是最强大的插槽类型。它允许子组件将数据“暴露”给父组件，父组件可以在插槽内容中使用这些数据。
作用：解决了“父组件需要根据子组件内部数据来定制内容”的需求。
语法：在 <slot> 标签上通过 v-bind（或简写 :）传递数据。在父组件中，使用 v-slot:slotName="slotProps" 接收数据对象。
示例：

<!-- 子组件：UserList.vue -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <!-- 将 user 对象通过作用域插槽传递出去 -->
      <slot :user="user" :index="user.id">
        <!-- 默认内容：如果父组件不提供插槽内容，则显示默认模板 -->
        {{ user.name }} - {{ user.email }}
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@example.com' }
      ]
    }
  }
}
</script>

<!-- 父组件中使用 -->
<template>
  <UserList>
    <!-- 接收子组件传递的数据 -->
    <template v-slot:default="slotProps">
      <!-- slotProps 包含 { user, index } -->
      <strong>{{ slotProps.user.name }}</strong> 
      (ID: {{ slotProps.index }}) 
      - <a :href="`mailto:${slotProps.user.email}`">{{ slotProps.user.email }}</a>
    </template>
  </UserList>

  <!-- 或者更简洁的解构写法 -->
  <UserList v-slot="{ user, index }">
    <strong>{{ user.name }}</strong> (ID: {{ index }}) - <a :href="`mailto:${user.email}`">{{ user.email }}</a>
  </UserList>
</template>

`slot` 的默认内容

你可以在 <slot> 标签内部写内容，作为默认内容。
当父组件没有为该插槽提供内容时，会显示默认内容。
示例：

  <slot>
    <p>暂无数据</p>
  </slot>

总结

概念	说明
什么是 slot	Vue 的内容分发机制，允许父组件向子组件的特定位置“注入”内容。
作用	提高组件的灵活性和复用性，实现动态内容渲染。
类型	1. 默认插槽：单个内容区域。 2. 具名插槽：多个有名称的内容区域。 3. 作用域插槽：子组件向父组件暴露数据，父组件可基于这些数据定制内容。
关键点	* `v-slot` 指令用于父组件指定内容。 * `#` 是 `v-slot:` 的简写。 * 作用域插槽是实现高度可定制组件的关键。

一句话总结：slot 是 Vue 实现组件内容可定制化的桥梁，它让组件不仅能接收数据（props），还能接收模板结构，是构建高级、可复用 UI 组件库的基石。

THE END

Vue 基础面试题