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

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

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

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

  

Hello, {{ userName }}

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

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

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

vue-component-analyzer

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

下载

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

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

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

  
• 
      {{ item.name }}
    

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

  

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

后备内容与作用域无关

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！