Vue 3.0 进阶

文是 Vue 3.0 进阶系列 的第六篇文章，在这篇文章中，阿宝哥将带大家一起探索 Vue 3 中的依赖注入功能。

使用过 Angular 的小伙伴对 依赖注入 应该不会陌生，依赖注入简称为 DI(Dependency Injection)。组件之间的依赖关系由容器在运行期决定，形象的说，即由容器动态的将某个依赖关系注入到组件之中。依赖注入的目的并非为软件系统带来更多功能，而是为了提升组件重用的频率，并为系统搭建一个灵活、可扩展的平台。

在 Vue 3.0 中，为我们提供了简单的依赖注入功能 —— provide/inject。它们解决了以下问题：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，这样使用起来会很麻烦。

为了解决上述问题，Vue 提供了 provide 和 inject。使用 provide/inject 之后，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。图可知，在父组件上通过 provide 提供数据，子组件通过 inject 注入数据。介绍完 provide/inject 的作用之后，我们来看一下具体的示例。

一、Provide/Inject 使用示例

在使用 provide/inject 特性时，你可以通过 provide 和 inject 选项的方式来使用它。这种方式官方文档已经有介绍了，这里阿宝哥将介绍另一种使用方式，即在组合式 API 的 setup 组件选项中，通过 provide 和 inject 函数的方式来实现依赖注入。以上示例中，在 Provider 组件内通过 provide 函数配置了数据，而在 Consumer 组件中通过 inject 函数获取 Provider 组件中已配置的数据。需要注意的是，示例中的 Consumer 组件是作为 Provider 组件的孙组件。因此，通过使用 provide/inject 提供的依赖注入功能，我们实现了数据的跨层级传递。

介绍完 provide 和 inject 函数的基本使用之后，接下来阿宝哥将带大家一起来揭开它们背后的秘密。

二、Provide 函数

在分析 provide 函数之前，我们先来回顾一下它的用法：

（编辑：南通站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!