Vue中如何通过Provide和Inject实现组件间的依赖注入？

本文共计1339个文字，预计阅读时间需要6分钟。

使用 provide 和 inject 的 Vue 依赖注入，可构建 Vue 组件或插件，避免在层级结构中直接提取 prop（通过一层层传递 prop，即级联传递 prop）。查看 Composition API 文档。

使用 ​​provide​​​ 和 ​​inject​​ 的 Vue 依赖注入对于构建 Vue 插件或避免钻取 prop（在层次结构中一路传递 prop，即使许多组件之间不需要 prop）。

查看 ​​Composition API 文档​​​，在 Vue3 中，使用 ​​provide​​​ 和 ​​inject​​ 的依赖项注入将更加常见。这主要是因为插件将不得不切换到使用这种模式，因为 Composition API 改变了这种引用（它不再让我们访问组件本身）。

在本文中，我们将介绍在 Vue3 中使用 ​​provide​​​ 和 ​​inject​​，以及如何使用它在组件层次结构中轻松分发内容。

什么是 ​​provide​​​ 和 ​​inject​​？

在 Vue3 中，每个父级（或根 Vue 实例）都可以为其所有子级提供依赖关系。这包括深度嵌套的子级，无论组件层次结构有多深。

然后，我们可以把这个值注入任何一个子级。

在深层组件结构中使用 Provide 和 Inject

基本上，我们所需要的只是依赖项的某种键，出于我们的目的，我们将使用一个简单的字符串。