浅谈vue中provide和inject 用法

最新推荐文章于 2023-06-26 20:45:08 发布
最新推荐文章于 2023-06-26 20:45:08 发布
阅读量591 收藏 1
点赞数
分类专栏： VUE涉及的技术内容 文章标签： javascript html ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48986139/article/details/121492780
版权

provide和inject是成对出现的

用于父组件向子孙组件传递数据

使用方法

provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

使用场景

由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子孙组件都可以调用inject来注入父组件中的值。

举个🌰子

在这里我们在父组件中provide for这个变
定义一个子组件 注入for 变量
定义一个子组件 注入for 变量
定义第二个子组件，注入for变量
在这里插入图片描述
我们从上面这个例子可以看出，在两个子组件中我们使用inject 注入了 provide 提供的 for变量，并给她提供了data属性，运行结果都为demo

weixin_48986139
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
聊聊Vue中provide/inject的应用详解
10-16
主要介绍了聊聊Vue中provide/inject的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中的provide与inject详解与使用
qq_42157868的博客
04-07 1299
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。 1.provide与inject一般都是成对使用，在父组件中使用provide分发状态 在父组件任意隔代组件中能使用inject接收porvide共享的值 例子 父组件 <script> export default { data(){ return { parentVal:'父组件的值' }, //使用provide劫持父组件的值 provide:{ val:this,
provide / inject vue实现父级下面所有子孙组件调用父级的数据
oldolder的博客
02-23 165
vue2 provide / inject 使用
vue2使用provide和inject传递方法【provide、inject】
qq_22841387的博客
03-11 3797
问题描述 现在我存在两个父子组件，相互之间嵌套了很多层，想要父组件中的方法。之前是通过$parent去实现的，现在我准备使用provide和inject实现 之前的代码如下： 虽然对parent进行了处理，但是这样的代码终究是不好的 解决方法 如标题所示，现在我尝试使用proviede和inject解决子组件调用父组件的方法。 在父组件中provide 因为我是想要调用父组件中的showTopic方法，所以在provide中返回这个方法即可 代码如下： provide() { return {
provide 与 inject 的使用
haha_556的博客
08-27 2124
简单理解 1.简单理解 　provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量 需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。 概念解析 成对出现：provide和inject是成对出现的 作用：用于父组件向子孙组件传递数据 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等
provide和inject的用法
weixin_52148270的博客
08-31 1302
1、provide与inject的功能 通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙组件中 provide 和 inject 主要在开发高阶插件/组件库时使用. 由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的. ##2.为什么不使用父子组件props传值呢？ 因为父子组件props传值需要需要知道往哪一个子组件传值，而
provide 和 inject如何使用？
最新发布
m0_57236802的博客
06-26 1059
主要在高阶插件/组件库中使用。并不推荐在应用程序代码中广泛使用，因为这会使得组件之间的数据流难以追踪和理解。可以是一个对象或者是一个返回对象的函数。对象的属性名是要发布的数据的名称，属性值是要发布的数据。是一种实现跨组件的数据共享的方法，特别适合在多级嵌套的组件间共享数据。是一个字符串数组，数组的元素是要订阅的数据的名称。选项提供（也就是发布）数据。在任何子孙组件中，你可以使用。选项注入（也就是订阅）数据。组件就可以直接在模板中使用。选项订阅了这个数据。s在 Vue.js 中，数据了，而不需要通过。
vue2.x中的provide和inject用法
老电影故事的博客
01-22 8529
慎用 provide / inject既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？答： 前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。
vue的provide的使用
xuebinsunwumei的博客
04-29 1万+
provide的使用方法： 在父组件中定义provide provide和data，methods同级 provide中返回值是一个对象，相当于将对象中的内容注入到子孙组件 子孙组件使用inject: [ 由provide键名组成的数组 ] ，来获取父级组件的方法或者其他属性 具体看代码 父组件： provide(){ return{ closeCurrent:this.closeCurrent, reload: this.routeReload // 刷
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
浅析vue中的provide / inject 有什么用处
10-16
主要介绍了vue中的provide / inject 有什么用处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Provide 和 Inject 的用法
热门推荐
weixin_41897680的博客
11-23 2万+
前言 父子组件传参可以通过props和emit来实现，但是当组件的层次结构比较深时，props和emit就没什么作用了。vue为了解决这个提出了Provide / Inject，知道这个东西，但是一直没用过，最近碰到了一个问题，踩了一些坑，在这里记录一下 备注： 我安装的是vue3.x，v-model用的是3.x的语法。 2.x和3.x用法一致，我这里是用2.x写的 通用知识 基本用法 provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或 一个对象，对象的
Vue中 provide、inject 详解及使用
明天也要努力的博客
03-13 2万+
类型 provide：Object | () => Object inject： Array<string> | { [key: string]: string | Symbol | Object } 详细 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。 ...
vue父子页面互相调用方法及属性
weixin_42401141的博客
04-06 9430
vue 参数传递 父子组件相互调用
vue中的provide/inject你知道吗（vue2、vue3）？
weixin_57399180的博客
09-17 6983
“依赖注入”主要是解决父子组件传值“props逐级传递”问题。所以，provide/inject的作用就是组件间的传值。
provide/inject
one-way or another
08-09 1183
概述 provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。 写法 // 传入对象写法 provide: { foo: 'bar' } // 函数写法 provide (...
关于报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component
weixin_48986139的博客
02-23 9593
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “value” 一个报错记录 大概意思是不可以直接修改父组件传过来的值 我这里写的是不对的 涉及公司内容 不全贴代码
vue中provide和inject如何使用
04-21
provide 和 inject 是 Vue.js 提供的一种组件间通信方式。在父组件中使用 provide 来提供变量/方法，然后在子组件中使用 inject 来注入这些变量/方法，从而实现组件间的通信。 具体使用方法如下： 在父组件中： `...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值