深究vue3中provide与inject

最新推荐文章于 2024-06-18 09:00:43 发布
最新推荐文章于 2024-06-18 09:00:43 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： VUE3 javascript 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46626517/article/details/115908698
版权

在vue中,组件之间的通讯方式有很多种, 比如父组件向子组件传参使用props、子组件与父组件通信使用emit、兄弟组件通信使用eventBus/(provides/inject)。现在就一起来研究一下provide与inject的实现吧.

provide

在开发过程中, 我们经常会在父组件或更上级的组件中使用provide, 然后在子孙组件中使用inject来接受, vue中的provideAPI给我们的开发带来了很大的便利,而且在使用过程中, 父级组件不需要知道哪些子孙组件在调用当前的provide, 而子孙组件也不需要知道当前inject调用的函数来自哪里。
下面让我们一起来看一下vue3源码中关于provideAPI的实现吧。

function provide<T>(key: InjectionKey<T> | string | number, value: T) {
   
  // 如果定义当前provide的组件不存在 在开发环境下发出警告⚠️
  if (!currentInstance) {
   
    if (__DEV__) {
   
      warn(`provide() can only be used inside setup().`)
    }
  } else {
最低0.47元/天 解锁文章
copy资深工程师
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue provide / inject 使用介绍
kangkang_style的博客
12-02 332
作用： 父子组件跨层级传递数据 优势： 解决了组件层级过多时，数据传递麻烦的问题 主要应用场景： 为高阶插件/组件库提供用例，不推荐在应用程序中使用 缺点： 数据追踪困难，不确定数据注入层，以及数据使用层 使用方法： provide: 一个对象，或者是一个返回对象的函数。 对象内包含想要传递的内容，即属性和属性值 注意： 子孙层的provide 会覆盖 父辈 provide中相同key的属性值 inject: 字符串数组，或者一个对象。属性值可以为对象，包
[Vue3学习笔记]provide与inject
あなたの可愛い41
12-21 352
Vue3学习笔记provide与injectFather.vueSon.vueGrandSon.vue补充：响应式数据的判断一些新组件 provide与inject 实现跨层级组件(祖孙)间通信 父组件provide const color=ref('red') // 提供数据 provide('color',color) 孙组件inject const color=inject('color') Father.vue <!-- * @Author
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-18 6536
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{
Vue Provide / Inject 详细介绍（跨组件通信、响应式变化、版本变化）
高大志leo的博客
12-21 1万+
背景 通常，当我们需要从父组件向子组件传递数据时，我们使用props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。 对于这种情况，我们可以使用一对provide和inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。 使用 假设有一个组件...
Vue3 & InjectionKey 的作用、使用
cookcyq__的博客
01-24 3182
在 Vue3 中使用 TS 时，父组件通过provide函数注入的数据类型往往是未知的，而子组件调用inject引入数据时也无法确定具体的数据类型是什么，这就产生了可维护性问题，比如某位同事写了下面这段代码时import {对于colors导数的数据类型我们并不知道是什么，它可以是对象 or 数组亦或是字符串，只能顺瓜摸藤找到它的 provide，对于小项目找一下可能不花费什么时间，但对于大型项目来说很明显是不可取的，于是官方提供了函数来对传参进行类型约束，确保父子间传递的数据类型是可见、透明的。
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 1万+
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析vue中的provide / inject 有什么用处
10-16
总的来说，`provide` 和 `inject` 是 Vue 中处理跨级组件通信的一种有效手段，尤其适用于不需要引入 Vuex 这样的状态管理库的小型项目。它们提供了灵活性，同时也需要注意响应性和数据管理的最佳实践。
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
Vue.js的`provide/inject`选项提供了一种在组件祖先和子孙之间传递数据的方法，它跳过了中间组件的层级，这对于非直接父子关系的组件通信非常有用。然而，要注意的是，这种通信方式并不是响应式的，这意味着如果你...
vue中的provide和inject
田兴的博客
09-18 5027
一、名词解析： provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Object } provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。 inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。 说明： provide 和 inject 主要在开发高阶插件/组件库
Vue中 provide、inject 详解及使用
热门推荐
明天也要努力的博客
03-13 2万+
类型 provide：Object | () => Object inject： Array<string> | { [key: string]: string | Symbol | Object } 详细 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。 ...
vue2.x中的provide和inject用法
老电影故事的博客
01-22 8832
慎用 provide / inject既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？答： 前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。
vue中provide 和 inject 的用法
zoukunyang的博客
04-13 2639
在父子组件传递数据时，通常使用的是 props 和 emit。父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。
Vue3中的provide/inject/InjectionKey
SEKIRO_DJ的博客
03-31 6176
用provide和inject可以很方便的在父子组件之间通讯，即使是多层子组件，也能获取到父组件的值。但是会遇上类型上的问题，导致父组件传给子组件的方法无法调用，这时候我们可以使用vue3提供的InjectionKey解决这一问题。 在父组件中定义对象和函数 ，用provide暴露 const user = ref({ name: 'Karen', age: 20 }) provide('user', user) const setUser = ({ name, age }: { name: str
Vue通信、传值、组件生命周期、插槽
Yannick_H的博客
08-22 347
transition name="动画名称">组件。
【Vuejs】1732- 详细聊一聊 Vue3 依赖注入
pingan8787
07-03 1239
???? 「相关文章」深入浅出 Vue3 自定义指令详细聊一聊 Vue3 动态组件6 个你必须明白 Vue3 的 ref 和 reactive 问题初中级前端必须掌握的 10 个 Vue 优化技巧分享 15 个 Vue3 全家桶开发的避坑经验在 Vue.js 中，依赖注入[1]（DI）是一种非常常见的跨组件传递数据的方法，它可以帮助我们更好地管理组件之间的依赖关系。本文将介绍 Vue3 中的依赖注入机制...
前端——Vue中Provide 和 Inject 的用法
helloyangkl的博客
11-18 1841
前端——Vue中Provide 和 Inject 的用法
vue3中provide与inject的区别
05-21
在Vue 3中，`provide`和`inject`是一对新的API，用于在父子组件之间进行数据传递。它们与Vue 2中的`props`和`$emit`有些相似，但又有所不同。 `provide`用于在父组件中提供数据，而`inject`用于在子组件中注入这些...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值