插槽作用域的核心是让父组件访问子组件数据并控制渲染逻辑，通过<slot>绑定属性透出响应式数据，父组件用v-slot接收解构使用，支持默认与具名插槽组合，需注意响应性与单向数据流。
插槽作用域的核心在于让父组件能访问子组件内部的数据，同时控制渲染逻辑。它不是单纯传递 HTML，而是把子组件的上下文“暴露”给父组件，实现数据与结构的解耦。
作用域插槽的本质是数据透出
子组件通过 <slot> 的绑定属性（如 :item="todo"）把自身数据作为 props 透出；父组件用 v-slot 接收这个对象，再决定怎么展示。关键点是：数据在子组件内产生和管理，渲染逻辑由父组件定义。
- 子组件中写
<slot :user="currentUser" :role="userRole"></slot>，相当于把两个响应式字段打包成一个对象传出去 - 父组件用
<template v-slot="scope">{{ scope.user.name }} ({{ scope.role }})</template>解构使用 - 若只用部分字段，可解构写法：
v-slot="{ user, role }"，更清晰也避免冗余引用
具名 + 作用域插槽组合更可控
当一个组件有多个区域需要动态内容，且每个区域都要用到不同数据时，应为每个 <slot> 单独命名并透出对应数据。比如表格组件中：表头需列配置、行内容需每条记录、空状态需条件信息。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 子组件中：
<slot name="header" :columns="columns"></slot>、<slot name="row" :row="item" :index="idx"></slot> - 父组件中分别用
v-slot:header="h"和v-slot:row="r"接收，互不干扰 - 这样既避免了把所有数据塞进一个插槽导致父组件逻辑混乱，也便于复用单个插槽区域
默认插槽也能带作用域，别忽略它
很多人以为只有具名插槽才能传数据，其实 <slot> 本身支持绑定，只是没有 name 属性。只要子组件写了 <slot :count="list.length"></slot>，父组件就能用 v-slot="{ count }" 拿到。
立即学习“前端免费学习笔记（深入）”；
- 适合轻量场景：比如一个卡片组件，只需把当前 item 或 loading 状态透出，不必额外起名
- 注意：如果子组件同时存在默认插槽和具名插槽，父组件必须显式使用
v-slot:default才能接收作用域数据，否则会被当作普通 HTML 内容处理 - Vue 2 中用
slot-scope，Vue 3 统一为v-slot，语法更一致
避免常见陷阱：编译作用域与响应性
父组件模板中所有表达式都在父级作用域编译，所以插槽里写的 {{ user.name }} 访问的是子组件透出的 user，不是父组件自己的同名变量。但要注意响应性边界：
- 子组件透出的数据必须是响应式的（来自 data、props 或 computed），直接传普通对象不会更新
- 不要在插槽作用域中修改子组件数据——这违反单向数据流，应通过事件通知子组件变更
- 若需预处理数据，可在子组件 computed 中封装后透出，而不是让父组件重复逻辑
