前端面试 P055：默认插槽、具名插槽与内容接口

来源：方格前端讲面试 · 13.插槽slot与具名插槽，5 分 27 秒。

回看定位：00:34 插槽概念 · 01:05 默认插槽 · 02:43 具名插槽

子组件定义出口，使用者提供内容

slot 让组件保留结构与行为，把指定区域的内容交给使用者。相比给每种文字、图标、布局都增加一个 prop，插槽适合表达可组合的界面内容。

<template>
  <section>
    <header><slot name="header">默认标题</slot></header>
    <main><slot /></main>
    <footer><slot name="footer" /></footer>
  </section>
</template>

使用方在 <Layout> 内用 <template #header>...</template> 提供头部，普通内容供默认插槽，#footer 提供底部。# 是 v-slot 的简写；未命名出口对应 default。

默认内容与命名契约

出口内部可给回退内容，没有提供相应插槽内容时使用。插槽名形成组件接口，应保持含义稳定，避免为每个微小样式差别都新建一个插槽。

插槽是内容分发与函数化渲染接口，不是把父组件源码文本拷贝到子组件后重新按子作用域执行。因此插槽里的变量归属不能只看最终 DOM 放在何处。

选择 prop 还是 slot

数据、配置和简单状态通常用 prop；可定制的渲染内容通常用 slot。把所有行为都塞成复杂插槽，可能让组件难以测试与理解。

本集默认、具名插槽的主线正确。更重要的词法作用域与子数据暴露见 前端面试 P056：插槽作用域与 slot props，不要据此认为父模板能直接访问子组件所有内部变量。

依据：Vue：插槽。