使用Vue从父组件传递数据到子组件，一般使用defineProps就能满足大部分场景，但如果要跨多层级组件传递数据，则可使用provide和inject。从provide和inject组合字面理解，类似于依赖注入模式，本篇内容将从provide、inject的实现原理来分析使用中的一些技巧。

provide、inject简介

来自官网的介绍：一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

provide组件内提供方式：

仅需调用provide提供key、value即可，需要注意的是：key建议使用Symbol形式提供，避免冲突；value可为任意类型，也可提供Ref类型，并且子组件使用时不会解构，依然保持响应式。

provide应用层提供方式：

部分全局配置，例如用户信息，希望在应用层级内所有组件都能获取配置，则可使用app.provide方法注入配置信息。

不管provide是组件内提供还是应用层提供，获取方式都是一样：

使用inject获取信息时，建议传递第二个参数作为缺省时默认值。

provide、inject使用技巧： provide提供的value虽然可以为响应式类型，但如果需要更新value值，则强烈建议把修改权交给父组件，父组件可在value中提供update方法给子组件，如下demo所示：

provide、inject源码本身不复杂，再加上上述demo的说明，接下来的源码理解起来就更加轻车熟路。

知因知果

provide源码

provide函数签名：

不要被这一串TypeScript类型给唬住了，反正提供key、value就行，key可以为Symbol类型，value没限制。其实这个签名存在bug: K可以为一个对象，例如provide({}, { a: 10})，也不会报TypeScript错误，但实际使用时却会有警告：

provide函数体被if、else包裹，先判断currentInstance是否为空，currentInstance为组件实体，provide只有包含在setup中才能生效，否则会给出warn提示。

正常使用的逻辑包含在else中，先从currentInstance.provides获取provides对象，如果组件注入任何数据，则currentInstance上的provides缺省为父组件的provides。

parentProvides为父组件provides，判断当前组件的provides是否等于父组件的provides，如果相等，则当前组件就得创建自己的provides了，Object.create方法为何意？以parentProvides作为原型(prototype)创建一个新对象，这样不管组件嵌套多少层，通过原型链方式可访问到链路上注入的所有数据。

问题：上文中currentInstance从何而来？这个话题得从东土大唐说到西天取经，这里就咱不介绍，但在外部也可以通过getCurrentInstance()方法一探当前组件的所有上下文。

inject源码

inject函数签名：

需要强调的是，defaultValue可以为function，例如() => value，此时treeDefaultAsFactory需要设置为true。

inject函数的主体代码如下，同样先获取组件intance，currentRenderingInstance代表SSR渲染的组件实体。

如果instance和currentApp都没有赋值，即表示未在setup下使用inject，此时会提示警告warn信息。currentApp是什么？通过createApp()创建的应用实体，上文有提到可通过app.provide(key, value)形式在应用层级注入配置信息。

接下来看instance或currentApp不为空的情况，这两者同时有且仅有一个不为空。什么情况下currentApp不为空，我们稍后再讨论，假如在组件中使用inject，则instance不为空。

instace.parent == null表示当前为root节点，例如App.vue对应的实体，则此时需要通过路径instance.vnode.appContext.provides(也即是应用层级上的provides)获取注入信息。否则，直接获取parent.provides即可。

什么情况下currentApp不为空？需要在非setup场景下获取应用的provides信息时，则需要通过以下方式使用inject：

在调用runWithContext时，其内部会将currentApp设置为app实体，以便在回调中使用inject能拿到应用层依赖注入信息。当在setup上下文时，直接调用inject函数就行。

最后一步，根据key从provides获取值, 但如果key不存在怎么办？根据第二个参数获取缺省值, 需要注意的是：如果缺省值为function，则需要执行defaultValue.call(instance.proxy)动态获取值。

使用中的问题和技巧

provide key使用硬编码，导致冲突

例如有这样的组件关系child.vue -> parent.vue->root.vue，如下所示，root和parent组件都定义有key为name的注入，child组件内只能获取到parent中provide，原因是root.vue的相同key被parent.vue覆盖掉。

为了避免key冲突，使用Symbol保证全局唯一性，为每一个key单独定义Smybol，改造如下：

inject使用时无TypeScript提示, 使用InjectionKey限制类型

如上文demo中所示，child.vue组件内感知不到parent或root组件具体提供了哪些provide，因此只能通过查阅父组件代码知晓。但在TypeScript代码中，开发者期望在使用inject时能够感知到提供的注入信息。

Vue为我们提供了范型Injection<T>来定义key的类型，例如为应用层级定义类型：

在App.vue中注入时，如果提供的value和AppConfigContext不匹配，则会报ts错误：

组件中使用时，也能感知到具体类型：

总结

通过provide、inject源码分析，了解到可通过getCurrentInstance函数获取当前组件的上下文，其中包含了组件的attrs、data等信息，这为我们在使用Vue过程中提供了更灵活的信息获取方式。

使用中，避免遍地开花式地滥用provide，到后期更本就没人知道到底提供了哪些依赖注入。好的使用方式： 注入时尽量通过Smybol方式定义key，避免冲突。更好的使用方式：通过Vue提供的InjectionKey范型提前定义好需要使用的属性，在child中使用时能感知到提供的具体属性。

原文链接：https://juejin.cn/post/7412672643633561663