作用域插槽是Vue中实现子传父渲染数据最自然的方式，通过子组件在slot上绑定响应式数据、父组件用v-slot解构使用，实现“数据向下暴露、渲染向上定义”。
作用域插槽是 Vue 中实现「子传父渲染数据」最自然的方式——它不靠事件、不改 props，而是让子组件把内部状态作为参数“塞进插槽”，由父组件在模板里直接解构使用。
作用域插槽的核心机制
本质是「数据向下暴露，渲染向上定义」：子组件控制什么数据可被访问，父组件决定怎么用这些数据生成 DOM。
- 子组件在
<slot>标签上用属性绑定响应式数据，例如:user="userInfo"或v-bind="{ item, index }" - 父组件用
v-slot（Vue 3 唯一语法）接收一个函数参数，解构出字段后直接用于插槽内容渲染 - 整个过程无副作用，不触发响应式更新链，也不依赖
ref或emit
具名作用域插槽（推荐用于多区域定制）
当子组件有多个可定制区域（如 header、footer、operation），用具名插槽语义清晰、不易混淆。
- 子组件中写：
<slot name="action" :id="item.id" :status="item.status"></slot> - 父组件中写：
<template #action="{ id, status }">操作按钮 ID: {{ id }}，状态：{{ status }}</template> - 多个字段可一起传，也可按需只解构需要的几个，其余自动忽略
默认作用域插槽（适合单内容区+数据透出）
常用于列表项、卡片等只有一个主体内容但需暴露内部数据的场景。
- 子组件：
<slot :item="currentItem" :loading="isLoading"></slot> - 父组件：
<template #default="{ item, loading }">{{ loading ? '加载中' : item.title }}</template> - 参数名完全自由，
sdata、props、scope都可以，关键是解构准确
注意事项与常见误区
看似简单，但容易卡在细节上：
-
Vue 3 不支持
slot-scope：必须统一用v-slot或简写#xxx，否则不生效 - 绑定的数据要是响应式的：直接传
{ id: 1 }没问题，但若后续修改该对象属性，父组件不会自动更新——需确保是ref或reactive对象 - 不要和
emits混用：作用域插槽传的是「用于渲染的快照数据」，不是「通知行为」；要触发逻辑仍需emit
