Vue 3 提供三种祖孙通信方案：1. provide/inject 实现响应式跨层级共享；2. $attrs 透传未声明的属性和事件；3. 组合式函数封装复用状态逻辑，按需选用。
在多级嵌套组件中，爷孙传参不必靠 props 一层层“接力”，Vue 3 提供了更干净、可维护的替代方案。核心思路是绕过中间层，让爷爷和孙子直接建立联系，同时保持响应性和类型安全。
用 provide / inject 实现响应式祖孙通信
这是 Vue 官方推荐、最轻量也最稳定的方案，适合主题、配置、全局方法等跨层级共享数据。
- 爷爷组件调用 provide() 注入响应式数据或函数，支持 ref/reactive
- 孙子组件用 inject() 拿到值，自动保持响应性，无需 watch 或手动同步
- 不依赖父组件是否声明 props 或是否转发，中间任何一层改名或重构都不影响通信链
示例：爷爷提供暗色模式开关，孙子按钮直接读取并响应变化
<!-- App.vue（爷爷）-->
const theme = ref('dark')<br>
provide('theme', theme)
<!-- DeepButton.vue（孙子）-->const theme = inject('theme') // 类型推导友好，TS 可配泛型<button :class="theme.value">切换主题</button>
用 $attrs 透传未声明的属性和事件
当父组件只是“透明通道”，不关心某些 props 或事件时，$attrs 是零成本的透传方式。
- 父组件无需定义 props，直接用 v-bind="$attrs" 把所有未声明属性+事件原样交给孙子
- 孙子组件通过 defineProps 或 ctx.attrs（Options API）接收，包括 onClickGrandFather 这类自定义事件
- 适合传递一次性回调、ID、data-* 属性等不需要响应式管理的值
注意：$attrs 不含已声明的 props，也不含 class/style（除非显式 include）
用组合式函数封装跨层级状态逻辑
把通信逻辑从模板抽离成可复用的 composable，让爷孙组件各自调用同一份逻辑，避免数据“流动”本身。
- 例如创建 useUserPermission()，内部用 reactive 管理权限状态
- 爷爷组件调用它设置初始权限，孙子组件也调用它订阅变更
- 状态不再属于某一个组件实例，而是被多个组件共同消费，天然解耦
这种方式比 provide/inject 更灵活，尤其适合业务逻辑强、需复用的状态场景。
不需要 Pinia，也不必写事件总线。这三种方式覆盖了绝大多数祖孙通信需求，关键在于按场景选对工具：需要响应式共享就用 provide/inject；只需透传就用 $attrs；要复用逻辑就抽成组合式函数。
