Vue3组合式API：provide( )和inject( )依赖注入

最新推荐文章于 2023-10-17 17:07:54 发布
最新推荐文章于 2023-10-17 17:07:54 发布
阅读量183 收藏
点赞数
文章标签： vue 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51389038/article/details/132987502
版权

provide()：提供一个值，可以被后代组件注入。

  • provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
  • provide() 必须在组件的 setup() 阶段同步调用。

示例 ：通过provide()为全局提供依赖

inject()：注入一个由祖先组件或整个应用提供的值。

  • inject() 也可接受两个参数：第一个参数是要注入的 key，第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
  • 使用inject()时，若注入的key为null，inject将返回undefined，除非提供了一个默认值。

示例： 通过inject()注入依赖

 

胆小小鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
详解Vue实战指南之依赖注入(provide/inject)
10-17
主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 依赖注入 ：跨组件通讯Provide与inject
05-25
vue 依赖注入 ：跨组件通讯Provide与inject
Vue3依赖注入 provide/inject
性感码农在线写笔记
07-04 399
vue3 provide inject
vue中的provide/inject你知道吗（vue2、vue3）？
weixin_57399180的博客
09-17 6814
“依赖注入”主要是解决父子组件传值“props逐级传递”问题。所以，provide/inject的作用就是组件间的传值。
vue3 provide与inject多级使用，以及数据监听
lxc的点点滴滴
09-28 819
vue3 祖父组件向孙子组件传值，并监听数据变化
Vue3——第九章（依赖注入：provide、inject）
why404
01-10 5013
Vue3——第九章（依赖注入：provide、inject）
vue3学习（十）--- 依赖注入Provide 和 Inject
最新发布
邱先生的博客
10-17 286
Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，React、Vue均可以使用。注意：你如果传递普通的值是不具有响应式的 需要通过ref reactive 添加响应式。如果不让后代组件修改数据可以在传递数据的时候加上readonly限制。这个原理其实是运用了JS设计模式之发布订阅模式，通过一个中间件来处理。的数据或方法，而在任何后代组件中，我们都可以使用。可以在祖先组件中指定我们想要提供给。main.ts 初始化。A组件派发（emit）
Vue3:组合式API-依赖注入（provide()、inject()）
weixin_62364503的博客
09-23 2073
Vue3:组合式 API：依赖注入(provide,inject)
vue3 provide/inject 的用法
guizi0809的博客
07-04 548
通常，我们从父组件向子组件传递数据（或者说子组件接收父组件传递的数据）时，使用 props。当我们想用父组件向深层子组件传递数据时，需要使用 props 沿着组件链逐级传递下去，十分麻烦，这时 provide/inject 就可以派上用场。 论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据。 实际上，你可以将依赖注入看作是“long range props”，除了： .
Vue3全局组件通信之provide / inject
老电影故事的博客
03-13 3982
顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的爷爷级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。😜😜😜因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。
vue3利器-inject和provide
sinat_33342614的博客
03-04 2854
vue3正式发布到今天已经差不多过去了两年了，想必各位vue coder已经对Composition API/Options Api的优劣都有了自己的想法，本文则想从vue3提供的inject和provide来介绍自己的开发体验以及对vue3组件开发思路上的理解～
vue3之provide(提供)与inject(注入)
Like_wind_的博客
12-14 2990
作用： 一个组件往往嵌套这更多的子组件，而这些子组件也许还有他们各自的子孙组件，这时如果我们还使用props方式来传值可能太过复杂和不利于维护，而这两个api就提供了更方便的传值方式，无论你的组件嵌套有多深，只要你在父组件定义了provide，那么在子孙组件调用inject就可拿到provide所在父组件定义的值，所以他们是成对出现 使用 // 父组件 import { ref,provide } from 'vue'; // provide()接受两参数(name: string,data: 传递的数据)
Vue 2.0 中依赖注入 provide/inject组合实战
10-16
主要介绍了Vue 2.0 依赖注入 provide/inject组合，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
vue的provide/inject实现响应式数据监听
热门推荐
yw00yw的博客
07-14 1万+
provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 无论多少层都会被子组建拿到 主要用在高阶组件 provide 选项应该是一个对象或返回一个对象的函数。 inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 正常使用
vue3.0 依赖注入 provide()和inject()使用教程
郝峰vip的博客
09-23 1393
vue3.0 依赖注入 provide()和inject()的使用教程
vue3之provide和inject函数()
weixin_47039303的博客
12-23 316
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app" > <son></son> </div> </body> <script src="js/vue3.j
Vue3的provide、inject使用方法
weixin_50368372的博客
04-19 3013
需要注意的是，在使用 provide 和 inject 方法时，建议使用字符串键值，以避免出现命名冲突。
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 9777
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
vue3 组合式api 孙子组件怎么调用爷组件属性和方法
06-09
在Vue3的组合式API中，你可以使用`provide`和`inject`来传递属性和方法。具体来说，你可以在爷组件中使用`provide`来提供需要传递的属性和方法，然后在孙子组件中使用`inject`来注入这些属性和方法。 例如，在爷...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值