在 Vue 3 项目里做跨层级组件通信我见过最多的写法还是 props 一层一层往下传。有次在后台管理系统的代码评审里一个三层就够的配置传递硬生生写了五层 props中间三层组件根本不用这份数据纯粹当二传手。这种时候 Vue3 的 provide/inject 才是正解——它是官方提供的依赖注入方案让祖先组件直接把数据喂给任意层级的后代组件。同时要注意 Vue 3 里的一个破坏性变更$listeners 已经被移除它的功能合并到了 $attrs 中事件透传的写法跟着变了不少。这篇就围绕 provide/inject 的用法和 $listeners 的迁移这两件事结合实际代码把逻辑讲透。1. 跨层级传值痛点为什么 Vue 官方会造出 provide/inject1.1 props 钻透的日常困境想象一个典型的业务页面订单列表页OrderPage下面是订单卡片OrderCard继续往下是订单状态组件OrderStatus再往下是状态徽标StatusBadge。如果要从 OrderPage 往 StatusBadge 传一个当前用户是否拥有查看权限的 isAdmin 字段按照 props 的正统思路中间两层必须全部声明 isAdmin 并再次传下去!-- OrderCard.vue -- template OrderStatus :is-adminisAdmin / /template script export default { props: [isAdmin] } /script问题很明显OrderCard 和 OrderStatus 可能完全不关心 isAdmin 是什么却要被迫维护一条与自身职责无关的传值链路。等字段增加、改名的时候牵一发动全身——我在实际项目里因为这种事改过一轮代码三个页面、十几个文件全部要动纯体力活还容易漏。而且 props 钻透不只是数据的问题。父组件要给最深层组件绑定一个事件中间的每一层都要手动 v-on 转发透传未声明的属性又得额外接住 $attrs。在 Vue 2 时代这事情更麻烦监听器单独挂在 $listeners 上需要专门处理。这种问题业内有个名字叫 prop drilling我自己的判断经验是一条 props 链路如果超过两层而且中间层完全不使用这些数据就应该考虑换传递手段了。1.2 provide/inject 解决的问题边界provide/inject 的设计意图很明确祖先组件通过 provide 提供数据任何后代组件都可以通过 inject 按需取用组件层级有多深都无所谓。官方文档对它的定位是依赖注入而不是全局状态管理这个定位差别很关键。最适合使用 provide/inject 的场景是主题切换。根组件维护一套全局主题配置页面组件、按钮组件、甚至弹窗里的提示文字都要读取当前主题色。如果走 props每个用到主题色的组件都要从路由组件一路接力如果直接上 Pinia 这类全局状态库又显得杀鸡用牛刀。provide/inject 正好卡在中间数据来源单一、链路清晰、不需要额外依赖。但它也不是万能药。provide/inject 的依赖关系是隐式的——子组件里写一个 inject 字符串你很难一眼看出这个数据到底由哪一层组件提供如果项目里到处是 provide/inject代码可读性会快速下降。我的建议是把它留给四类场景跨三层以上的上下文数据、主题与国际化配置、权限信息、模块级的默认配置。普通的两三层业务传值依然用 props emit层级简单且意图明确这样代码更好维护。对比维度props emitprovide/inject传递层级逐层声明、逐层传递祖先直供任意后代依赖可见性显式组件接口清晰隐式需约定管理适用场景父子组件普通通信跨多层上下文共享调试难度链路清晰易追踪来源不明时难排查2. provide/inject 两种写法对比选项式 API 与组合式 API2.1 选项式 API 中的 provide/injectVue 3 保留了选项式写法老项目平滑迁移时可以先这么写。祖先组件里通过 provide 提供数据// 祖先组件 export default { provide: { theme: dark, apiBase: /api/v2 } }后代组件里用 inject 接收// 任意后代组件 export default { inject: [theme, apiBase], mounted() { console.log(this.theme) // dark } }这个写法有一个重要限制provide 直接传对象字面量时注入的值不是响应式的。如果祖先组件后续把 theme 改成了 light后代组件拿到的仍然是 dark。原因很简单provide 对象字面量仅仅在初始化时被读取了一次后续没有做任何依赖追踪。如果需要让提供的数据保持响应式就得把 provide 改成函数形式并且借助 computed 或者包装后的响应式对象// 祖先组件 export default { data() { return { theme: dark } }, provide() { return { theme: computed(() this.theme) } } }这里要用 computed 包一层不能直接返回 this.theme直接返回字符串照样不响应。这个坑我在用选项式 API 重写旧页面时踩过一开始偷懒只写了theme: this.theme结果子组件到处都不更新排查了半天才反应过来。2.2 组合式 API 中的写法在 Vue 3 的新项目里我更推荐用组合式 API配合