Vue 插槽 slot 是什么？默认插槽、具名插槽和作用域插槽有什么区别？

知识点详解：子列表提供数据，父模板决定一行怎么显示

默认和具名，先回答内容放在哪里

咱们假设有一个卡片组件，它负责边框、间距和布局，但是每个页面的标题与正文不同。

组件内部可以设置 header 插槽放标题，设置默认插槽放正文。父组件提供对应内容，卡片负责把它们安排到正确位置。

没有指定名字的插槽叫 default。具名插槽只是给出口命名，父组件用 #header 等语法对应。一个组件可以同时包含默认插槽和多个具名插槽。

出口还可以提供后备内容。如果调用方没有提供对应插槽，就显示后备内容。这个机制适合默认标题或空状态，但要明确哪些内容可被替换。

作用域插槽，解决子数据怎样交给父模板

再假设一个 SmartList 组件负责遍历 rows。它知道每一条 row，但页面想自行定义这条数据如何显示。

子组件的 Vue 单文件组件片段：

<script setup lang="ts">
defineProps<{ rows: { id: number; name: string }[] }>();
</script>

<template>
  <ul>
    <li v-for="row in rows" :key="row.id">
      <slot name="item" :row="row">{{ row.name }}</slot>
    </li>
  </ul>
</template>

父组件片段：

<script setup lang="ts">
import SmartList from "./SmartList.vue";
const prefix = "用户：";
const rows = [{ id: 1, name: "小明" }];
</script>

<template>
  <SmartList :rows="rows">
    <template #item="{ row }">
      <strong>{{ prefix }}{{ row.name }}</strong>
    </template>
  </SmartList>
</template>

子组件通过 :row="row" 向 item 插槽提供数据，父组件通过 { row } 接收。prefix 来自父组件自己，row 则来自子组件的插槽参数。

两个数据来源同时出现在一个模板里，不代表父组件能直接访问子组件内部。Vue 仍然遵守插槽模板的作用域规则，只是子组件通过参数把这份数据明确交过来了。

这是一份使用 TypeScript 的 Vue 3 示例。Python 没有同一套 Vue 模板运行时，不能提供一个同名函数冒充等价实现。

三个名字不是互斥的三类

咱们刚才的 item，既是具名插槽，也是提供 row 的作用域插槽。

“默认、具名”回答出口怎么命名；“作用域”回答出口有没有向使用方提供数据。把它们理解成两个维度，比背三段定义更准确。

默认插槽同样能传参数，例如 <slot :row="row" />。不要认为只有写了 name 才能使用作用域插槽。

公共组件应该开放什么？

SmartList 可以负责加载、遍历、空状态等能力，让页面定制每行内容。这样子组件不用为了“加头像、加按钮、加标签”不断增加一组组布尔开关。

但插槽也不能替代所有 API。稳定、简单的配置适合 props；需要描述组合内容或使用子数据自定义渲染时，插槽更合适。开放接口还要说明 slot props 的结构，避免以后改字段让调用方全部失效。

作用域规则与语法依据 Vue 3 官方插槽文档 核验。

面试官继续追问

父插槽模板能读取子组件其他私有变量吗？

不能直接读取。需要子组件把它作为 slot props 提供，或者通过其他明确公开的接口访问。

为什么不直接给每行内容传一个字符串？

字符串适合简单文本，插槽能描述结构、事件和组件组合。需求只是文字时不必过度设计，需要定制渲染时再开放模板能力。

面试速记卡

• 插槽：子组件给出口，父组件提供内容。
• 默认 / 具名：决定出口的名称和对应位置。
• 作用域插槽：子组件用 slot props 提供数据。
• 模板作用域：父模板使用父作用域，加上显式收到的插槽参数。
• 二维关系：具名插槽也可以是作用域插槽，不是三选一。