Vue Slot作用域核心是“谁的数据、在哪儿编译”：父组件写的插槽内容只能访问父数据；子组件模板中表达式才访问子数据；作用域插槽通过v-bind暴露子数据，由v-slot解构进入新作用域。

Vue 的 Slot 作用域控制，核心在于“谁的数据、在哪儿编译”。它不是由子组件决定父组件能访问什么，而是由模板定义的位置决定作用域归属——父组件里写的插槽内容，永远只能访问父组件的数据；子组件模板里的表达式，才访问子组件的数据。

默认插槽：内容归父，渲染归子

父组件在子组件标签内写的内容，比如：

<user-card>
  <p>Hello, {{ userName }}</p>
</user-card>

这里的 {{ userName }} 是父组件的 data 或 setup 中定义的变量，与 user-card 组件内部的 user 或 id 无关。哪怕子组件模板里有 <slot></slot>，它只是个“搬运工”，不改变插槽内容的编译上下文。

立即学习“前端免费学习笔记（深入）”；

具名插槽：位置可分，作用域不变

给插槽加 name（如 <slot name="header"></slot>），只影响内容“投递到哪”，不影响“谁来算值”：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 父组件用 <template #header>{{ title }}</template>，title 必须来自父组件
• 子组件即使有 headerTitle 这个 prop 或 data，父组件插槽里也访问不到
• 多个具名插槽之间互不干扰，但各自都绑定在父作用域中

作用域插槽：子传数据，父来渲染

这是唯一打破“父写父算”规则的方式。关键动作是子组件主动把数据通过 v-bind 暴露出去：

<!-- 子组件 List.vue -->
<ul>
  <li v-for="(item, i) in list" :key="i">
    <slot :item="item" :index="i" :is-active="item.id === activeId">{{ item.name }}</slot>
  </li>
</ul>

父组件接收时，必须用 v-slot 解构，此时才进入新的作用域上下文：

<!-- 父组件 -->
<list :list="users">
  <template #default="{ item, index, isActive }">
    <span :class="{ active: isActive }">#{{ index }}: {{ item.name }}</span>
  </template>
</list>

注意：slotProps 对象中的字段，全部来自子组件的 v-bind 绑定，父组件自身同名变量会被覆盖。

后备内容与作用域无关

<slot>默认文案</slot> 中的“默认文案”是纯静态字符串，不参与任何作用域计算。它只在父组件没传内容时显示，且不解析其中的双大括号。如果需要动态后备内容，得用 v-if + 插槽判断，而不是依赖 slot 内部表达式。