作用域插槽通过绑定子组件响应式数据并由父组件解构使用，实现状态与上下文传递；多层透传需显式转发，深层共享推荐provide/inject配合作用域插槽。
Vue.js 中插槽本身不直接“传递状态”，而是通过作用域插槽（scoped slots）把子组件内部的数据、方法或响应式上下文暴露给父组件，让父组件决定如何渲染——这才是真正实现“状态与上下文信息传递”的核心机制。
作用域插槽：让父组件拿到子组件的响应式数据
子组件在 <slot></slot> 上绑定属性（如 :item=" currentItem"、:loading=" isLoading"），这些属性会作为插槽作用域对象的一部分，被父组件用 v-slot="{ item, loading }" 解构使用。这些值是响应式的，父组件模板中能实时反映子组件内部状态变化。
- 子组件中定义：
<slot :item="item" :candelete="isOwner" :onedit="editItem"></slot> - 父组件中消费：
<template v-slot:default="{ item, canDelete, onEdit }"><button>编辑</button></template> - 关键点：绑定的值可以是 ref、computed、method，甚至整个 reactive 对象，全部保持响应性
多层级透传时，状态上下文不能自动穿透
如果插槽内容要跨多层组件（比如 Parent → Layout → List → Item），中间每一层都必须显式转发作用域插槽，否则上下文会在某一层中断。仅靠 <slot></slot> 标签不够，必须配合 v-bind="slotProps" 或动态插槽语法。
- 中间组件需接收并原样转发：
<slot name="item" v-bind="itemSlotProps"></slot> - Vue 3.3+ 可用一键透传：
<child v-for="(s, name) in $slots"></child>，但注意它只转发插槽函数，不自动携带父级作用域变量 - 若中间层需增强上下文（如加权限字段），可在转发前合并：
v-bind="{ ...itemSlotProps, hasPermission: checkRole() }"
结合 provide/inject 实现深层上下文共享
当多个插槽需要共用同一份上下文（如表单校验器、国际化 locale、主题配置），单独靠作用域插槽逐层传容易冗余。此时建议在顶层组件用 provide 注入，深层插槽所在组件用 inject 获取，再通过作用域插槽把 context 暴露出去。
- 顶层组件：
provide('formContext', reactive({ errors: {}, validate() {…} })) - 子组件中 inject 后，在 slot 中暴露：
<slot :context="formContext"></slot> - 父组件解构使用：
v-slot="{ context }"><span v-if="context.errors.name">{{ context.errors.name }}</span>
避免常见断点：作用域丢失的典型原因
看似写了作用域插槽，但父组件拿不到数据，往往不是语法错，而是逻辑链断裂：
- 子组件
<slot></slot>没绑定任何属性 → 父组件解构得到空对象 - 父组件写
v-slot="{ user }"，但子组件传的是:userInfo="user"→ 名字不匹配，解构失败 - 中间组件用了
<slot name="header"></slot>却没配v-bind→ 作用域数据被截断，只传了 DOM 片段 - 在 setup script 中未正确 expose 方法，导致
@click="onSubmit"在插槽里无法调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
