作用域插槽是 Vue 3 中实现“子组件提供数据、父组件决定渲染”的关键机制，通过显式绑定 slot props 传递响应式数据，保障封装性与安全性，避免暴露内部状态或破坏响应性。
作用域插槽是 Vue 3 中实现“子组件提供数据、父组件决定渲染”的关键机制。它不是把子组件整个状态暴露出去，而是有选择地、显式地将需要的数据通过插槽属性（slot props）传递给父组件，从而保障封装性与安全性。
明确哪些数据该传、怎么传
子组件只能把明确声明在 <slot> 标签上的属性值传出去，父组件无法访问子组件内部未暴露的响应式变量或方法。这是 Vue 模板词法作用域的天然限制，也是安全性的第一道防线。
- 在子组件模板中，用
:key="value"的形式为<slot>绑定属性，例如<slot :item="todo" :index="i"></slot> - 这些绑定的值必须是子组件
setup或data中已定义、可访问的响应式数据（如ref、reactive或计算属性） - 避免直接传
this、instance或未处理的原始对象引用（如深层嵌套但未响应式包装的数据）
用响应式包装确保父组件能正确监听变化
如果子组件内部状态会更新（比如列表增删、字段修改），且希望父组件插槽内容同步响应，必须确保传出去的数据是响应式的。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 推荐使用
toRefs或toRef拆解reactive对象后传递，例如：<slot :item="toRef(state, 'currentItem')"></slot> - 若只传普通值（如字符串、数字），父组件无法感知后续变更；需配合事件（如
emit）通知重渲染，或改用计算属性封装逻辑 - 不要传函数本身作为 slot prop（除非明确需要父组件调用），更不要传
ref.value这类非响应式值
具名插槽 + 类型约束提升安全性
使用具名插槽配合 TypeScript 类型定义，可从开发阶段就防止误用或越权访问。
立即学习“前端免费学习笔记（深入）”；
- 在子组件中用
defineProps约束插槽预期接收的数据结构（虽不强制父组件遵守，但 IDE 和类型检查能提示） - 父组件使用
v-slot:xxx="props"时，可通过解构加类型注解明确意图，例如：v-slot:default="{ item, index }"，而非笼统的sdata - 对敏感字段（如用户 token、内部 ID）不放入 slot props，改用事件或 provide/inject 等更可控方式
避免常见不安全操作
以下做法会破坏封装性或引发响应失效：
- 在子组件中把整个
state对象作为 slot prop 传出去（<slot :state="state"></slot>）——暴露过多，且可能含不需要的私有字段 - 在插槽内直接调用子组件未暴露的
methods或内部函数 - 用
JSON.stringify或展开运算符（{...obj}）浅拷贝后传值，丢失响应性 - 在父组件插槽中尝试修改 slot prop 的属性（如
props.item.name = 'new'），这不会触发子组件更新，也不符合单向数据流原则
