Vue3中依赖注入provide、inject的使用
一、Prop 逐级透传问题
vue中我们要从父组件向子组件传递数据时，会使用 props。
如果需要给深层子组件传递数据，会非常麻烦，
如下图：
provide 和 inject 可以帮助我们解决这一问题。
一个父组件相对于其所有的后代组件，会作为依赖提供者。
任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
二、Provide (提供)
要为组件后代提供数据，需要使用到 provide() 函数：
如果不使用 <script setup>，请确保 provide() 是在 setup() 同步调用的：
provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。
后代组件会用注入名来查找期望注入的值。
一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。
第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：
提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。
三、应用层 Provide
除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：
在应用级别提供的数据在该应用内的所有组件中都可以注入。
这在你编写插件时会特别有用，因为插件一般都不会使用组件形式来提供值。
四、Inject (注入)
要注入上层组件提供的数据，需使用 inject() 函数：
如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。
这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。
同样的，如果没有使用 <script setup>，inject() 需要在 setup() 内同步调用：
五、注入默认值
默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。
如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。
如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似：
在一些场景中，默认值可能需要通过调用一个函数或初始化一个类来取得。
为了避免在用不到默认值的情况下进行不必要的计算或产生副作用，我们可以使用工厂函数来创建默认值：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在 Vue.js 开发单页面应用（SPA）时,组件的频繁创建和销毁会带来一定的性能开销,为了优化这一问题,Vue 提供了 keep-alive 组件,本文将深入剖析 keep-alive 的实现原理,需要的朋友可以参考下2025-10-10
这篇文章主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料，以及介绍了vue引入elementUI报错的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vant中如何修改用户的头像，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue实现日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在使用 Vue.js 进行开发时,模板中的 HTML 注释通常会被 Vue 的编译器自动移除,然而,在某些情况下,我们可能希望保留这些注释,例如为了调试、文档生成或其他特殊需求,本文将详细介绍如何在 Vue 渲染模板时保留 HTML 注释,并提供相关的代码示例,需要的朋友可以参考下2025-03-03
Vue createRenderer 自定义渲染器从入门到实战
本文主要介绍了Vue createRenderer 自定义渲染器从入门到实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-01-01
vue+element多选级联选择器自定义props使用详解
这篇文章主要给大家介绍了关于vue+element多选级联选择器自定义props使用的相关资料,级联选择器展示的结果都是以数组的形式展示,也就是v-model绑定的结果,需要的朋友可以参考下2023-07-07
组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于如何一步步用Vue.js创建一个组件的相关资料,需要的朋友可以参考下2022-12-12
最新评论