vue传值-provide和inject的使用

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

一、组件间provide和inject传值与props传值区别

1.使用provide和inject进行传值，在子组件修改父组件的值，父组件会对应的改变。这种方式一般在多层关系使用比较便利，例如祖先组件和孙子组件，祖先用provide return出去，孙子用inject注入，孙子组件就可以直接使用祖先组件的数据和方法等。

2.另外也可以用props祖传父，父传孙。就是比较麻烦点

二、实例

使用provide和inject进行传值操作如下（组传孙）：
这是祖先组件，使用provide传递整个this
在这里插入图片描述

2.这是孙子组件：使用inject注入
在这里插入图片描述

weixin_51057395
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject： Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名） 要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的 provide和inject响应的例子： 父
Vue3 关于 provide、inject 的用法
fang_my的博客
03-01 5316
在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的。
Vue3的provide、inject使用方法
weixin_50368372的博客
04-19 3049
需要注意的是，在使用 provide 和 inject 方法时，建议使用字符串键值，以避免出现命名冲突。
Vue 中provide/inject实现响应式数据更新（组件子孙传值）
蔡小波的博客
03-05 1万+
vue.js官方文档：https://cn.vuejs.org/v2/api/#provide-inject 首先了解Vue.js中provide/inject的基本用法： 官方的说明大家可以打开上面的链接去看，说通俗点，就是可以用来父辈们给祖孙传值，请看清楚，这里说的是可以隔代传值，传统的props只能父传子，不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而...
vue js中使用provide与inject传值
sssssnmmm的博客
07-15 554
正常情况下，我们传数据都是在父子组件中通过props的方式进行父子组件间的传值，这种方式传数据不能跨"辈"，如果想要从祖组件传数据到子组件需要一层层的传递，这样会显得很麻烦。上面的实例通过provide（）提供了一个值，这样后代组件就能通过inject来接收这个由祖父组件传递过去的值。时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数。provide与inject解决的是祖孙组件中传值的问题：把祖组件的数据直接传递到子组件。接收两个参数,第一个参数是要注入的。
Vue2 传值（父子传值，provide/inject传值，vuex传值）
Realizee的博客
12-08 2468
vue组件间通讯有什么方法： 1） 使用props、$emit 传值 （prop向下传递，事件向上传递；$emit触发父组件的自定义事件） 2） 使用provide、inject 传值 3） 使用bus.js （通过定义公共实例文件来进行非父子组件之间的传值） 4） 使用vuex 父子组件间传参，用props、$emit 比较便利好用； 跨组件传参，用provide/inject ，vuex
组件之间的传值——provide和inject
m0_59345890的博客
09-08 1156
在需要获取数据的组件内直接用inject注入到当前组件中，不管你处于那一层都能够获取到，inject属性的值为一个字符串数组，或一个对象，对象的情况可具体查看官方API。组件之间的多层传值我们前面学习过了通过$attrs和$listeners，今天我们来学习一个更为简单的方法利用组件对象的属性provide和inject,它们与data、methods这些属于同级。但是它有一个缺点就是数据不是响应式的，如我在爷爷组件方法内修改提供的值，但是子组件中获取的值不会改变。父亲组件：可以被注入提供的数据。
vue中的provide和inject
weixin_33976072的博客
05-24 155
2019独角兽企业重金招聘Python工程师标准>>> ...
vue传值provide和inject的使用
weixin_44161385的博客
08-26 1196
vue传值provide和inject的使用
vue-decorator-inject:ES6装饰器对Vue.js的依赖注入
05-09
Vue装饰器注入ES6装饰器对Vue.js的依赖注入安装如果您使用的是Webpack或类似产品： npm i --save-dev vue-decorator-inject 否则，-- --save可能更明智。介绍该库将容器与类似于Symfony中的容器的接口结合在一起，并...
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue组件间的传值-小案例
07-06
写了几个小demo，简单描述了vue中父组件传值子组件、子组件传值父组件、父组件调用子组件的方法或变量。
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue中provide和inject 用法（vue组件爷孙传值）
weixin_42125732的博客
06-08 9950
1.概念 　　成对出现：provide和inject是成对出现的 　　作用：用于父组件向子孙组件传递数据 　　使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。 　　使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据 ...
vue2中provide/inject的使用和响应式传值
热门推荐
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
vue2使用provide/inject父子孙后代组件传值
baiqiangdoudou的博客
12-13 2240
vue2使用provide/inject父子孙后代组件传值
vue3中的provide与inject跨层级组件(祖孙)间通信
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-30 919
· provide和inject提供依赖注入，功能类似 vue2.x 的provide/inject · 实现跨层级组件(祖孙)间通信
vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式
qq_38886284的博客
03-31 2279
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 299
vite.config.ts配置。
vue组件传值provide和inject
09-22
使用Vue中的provide和inject可以实现组件之间的传值操作。在祖先组件中，使用provide关键字传递需要共享的数据或方法，而在子组件中使用inject关键字注入这些数据或方法，并直接使用。 需要注意的是，使用provide和inject进行传值时，如果子组件修改了父组件的值，父组件会相应地发生改变。这种方式在多层关系的组件中使用比较方便，例如祖先组件和孙子组件之间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值