Vue 提供 $attrs + inheritAttrs: false 实现自动 props 透传，避免中间组件污染；需用 defineProps 明确接收、defineExpose 暴露接口；深层场景优先 use provide/inject；组合式 API 中可封装 composable 复用透传逻辑。
Props 透传不是必须层层手动写，Vue 提供了更简洁的方案来避免“中间组件污染”。关键在于区分哪些 props 是中间组件真正需要的，哪些只是单纯转发——后者应尽量用 v-bind="$attrs" 和 inheritAttrs: false 配合处理。
什么时候该用 $attrs 代替逐层传递？
当一个组件只做“通道”，不消费某个 prop（比如 data-test、class、style 或自定义属性如 theme），却又要把它传给内部子组件时，就适合用 $attrs。
- 默认情况下，未在
props中声明的属性会自动绑定到根元素上 —— 这常导致意外覆盖或样式错乱 - 设
inheritAttrs: false可关闭该行为，把控制权交还给开发者 - 再配合
v-bind="$attrs"，就能把所有未声明的 props 一次性透传给目标子组件
如何配合 defineProps + defineExpose 做清晰的接口契约？
透传不等于放任。中间组件仍需明确自己接收什么、暴露什么。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 用
defineProps显式声明本层真正使用的 props（如size、disabled） - 用
defineExpose暴露内部子组件的方法或状态（如focus()、validate()），避免父组件穿透调用 - 对透传的 props 不做逻辑处理，也不在模板中重复出现，保持“透明中继”语义
深层嵌套下，用 provide/inject 替代长链透传？
当某类配置（如主题、国际化、表单上下文）需要跨多层（3 层以上）且不随组件实例变化时，provide/inject 更合适。
立即学习“前端免费学习笔记（深入）”；
- 它不依赖父子链，也不受中间组件是否透传影响
- 适合静态或低频变更的数据，比如全局 UI 配置、API 基础路径
- 注意：避免用 inject 响应式对象却不加
readonly，防止下游意外修改源头
组合式 API 下的透传实践建议
在 setup 语法中，透传逻辑更易收敛和复用。
- 把常用透传逻辑抽成 composable，例如
useForwardAttrs()返回{ attrs, forwardProps } - 用
toRefs(props)+v-bind实现 selective 透传（只传特定几个） - 配合 TypeScript 接口定义
ComponentProps，让透传字段在 IDE 中可推导、可约束
