Vue 的主要概念之一是组件化。然而，在复杂的应用程序中，组件之间的通信可能会变得复杂。为了解决这个问题，Vue3提供了称为provide和inject的机制。这允许您向父组件提供变量并将其插入到后代组件中以供使用。在Vue 3中，使用provide和inject更加方便高效。本文简要介绍了这两个API。
Prop 逐级透传问题
当需要将数据从父组件传递到子组件时，通常会使用属性。想象一下这样的结构：有多个多层嵌套组件形成一个巨大的组件树，深层子组件需要来自远祖组件的数据。在这种情况下，如果你只想使用props，你必须将它们沿着组件链传递下去，这是非常麻烦的。
请注意，这里的页脚组件可能根本不关心这些属性，但您需要定义并传递这些属性以便DeepChild 访问它们。如果组件链接很长，那么一路上可能会有更多组件受到影响。这个问题称为“prop passthrough”，显然是您希望尽可能避免的情况。
Provide 和Inject 有助于解决这个问题[1]。父组件充当其所有后代组件的依赖项提供者。后代组件树可以跨链接注入父组件提供的依赖项，无论其深度如何。
Provide和Inject到底是什么？
在Vue 中，提供和注入机制允许父组件定义变量并将其提供给其所有后代组件。您可以在任何后代组件中插入和使用此变量。这种跨级组件通信方式特别适合复杂的嵌套组件结构，避免繁琐的中间传输。
与此图类似，父组件包含很多子组件，组件之间的通信逻辑是使用Provide和Inject实现的，如下所示：
如何使用Provide和Inject？
这里使用的是vite5+vue3设置语法糖。当前的vue 版本是3.4.27。提供和注入与ref API 相同。如果vue接口没有全局注入，可以通过import的方式获取。
案例代码全局注入到vue接口中，所以只需要在父组件末尾指定变量即可。
这样写后，当变量发生变化时，也可以及时获取到子组件，非常nice。
如果使用子组件，则需要创建钩子。或者在这里使用前者。
创建一个钩子方法来检索父组件提供的变量。
使用此类变量的子组件可以通过这种方式导入和使用。
父组件的HTML 结构如下所示：使用提供和注入方案进行通信时，不再需要：xxx=\’xxx\’。
特别提醒
尽管Provide 和Inject 很有用，但应谨慎使用，以避免出现以下问题：
插入未提供的属性：如果尝试注入父组件未提供的变量，Vue 将返回未知。为了避免此问题，我们建议您始终指定默认值。
变量名称冲突：当多个父组件提供同名变量时，子组件会插入最接近的变量。我们建议使用唯一的名称以避免冲突。
总结
总而言之，Vue 3 的Provide 和InjectAPI 提供了一种强大而灵活的方式来处理复杂的组件通信问题。但是，请记住，每个工具都有使用场景。只要有可能，就应该为您的项目深思熟虑和开发最佳实践。
#Vue 3 依赖注入： 以上关于API注入提供及相关内容来源网络仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91828.html
