组件通信 插槽通信如何通过作用域插槽实现子组件向父组件反向传递渲染数据

作用域插槽是Vue中实现子传父渲染数据最自然的方式，通过子组件在slot上绑定响应式数据、父组件用v-slot解构使用，实现“数据向下暴露、渲染向上定义”。

作用域插槽是 Vue 中实现「子传父渲染数据」最自然的方式——它不靠事件、不改 props，而是让子组件把内部状态作为参数“塞进插槽”，由父组件在模板里直接解构使用。

作用域插槽的核心机制

本质是「数据向下暴露，渲染向上定义」：子组件控制什么数据可被访问，父组件决定怎么用这些数据生成 DOM。

1. 子组件在 <slot> 标签上用属性绑定响应式数据，例如 :user="userInfo" 或 v-bind="{ item, index }"
2. 父组件用 v-slot（Vue 3 唯一语法）接收一个函数参数，解构出字段后直接用于插槽内容渲染
3. 整个过程无副作用，不触发响应式更新链，也不依赖 ref 或 emit

具名作用域插槽（推荐用于多区域定制）

当子组件有多个可定制区域（如 header、footer、operation），用具名插槽语义清晰、不易混淆。

1. 子组件中写：<slot name="action" :id="item.id" :status="item.status"></slot>
2. 父组件中写：<template #action="{ id, status }">操作按钮 ID: {{ id }}，状态：{{ status }}</template>
3. 多个字段可一起传，也可按需只解构需要的几个，其余自动忽略

默认作用域插槽（适合单内容区+数据透出）

常用于列表项、卡片等只有一个主体内容但需暴露内部数据的场景。

1. 子组件：<slot :item="currentItem" :loading="isLoading"></slot>
2. 父组件：<template #default="{ item, loading }">{{ loading ? '加载中' : item.title }}</template>
3. 参数名完全自由，sdata、props、scope 都可以，关键是解构准确

注意事项与常见误区

看似简单，但容易卡在细节上：

1. Vue 3 不支持 slot-scope：必须统一用 v-slot 或简写 #xxx，否则不生效
2. 绑定的数据要是响应式的：直接传 { id: 1 } 没问题，但若后续修改该对象属性，父组件不会自动更新——需确保是 ref 或 reactive 对象
3. 不要和 emits 混用：作用域插槽传的是「用于渲染的快照数据」，不是「通知行为」；要触发逻辑仍需 emit