inject 接收不到 provide 中的值

最新推荐文章于 2024-09-12 20:58:13 发布
最新推荐文章于 2024-09-12 20:58:13 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： vue精选 文章标签： inject inject接收不正确 provide inject provide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/louting249/article/details/114983542
版权
本文探讨了在Vue中使用provide/inject进行数据传递时，子组件无法接收到父组件接口更新后的值的问题。原因是provide在初始化时传给了子组件一个固定值，而非动态的数据引用。解决办法是在data中以对象形式定义，从而传递数据的引用，确保子组件能获取到父组件的实时变化。
摘要由CSDN通过智能技术生成

一、question？？？

1. provide传值

在这里插入图片描述
这个 layoutModel 在data中默认值是1，然后通过接口请求，改变它的值
在这里插入图片描述

2. inject接收值

在这里插入图片描述
在这里插入图片描述

此时父组件的值为3，但是inject接收到的值为1
在这里插入图片描述

二、Why

因为是接口请求更新数据，但provide在初始的时候就传了一个固定的初始值下去，所以下级组件接收到的是初始值，而不是更新后的值

三、Answer

在data定义的时候采用对象的形式，这样就是传一个地址过去 而不是一个固定的值
在这里插入图片描述

最低0.47元/天 解锁文章
lt要努力
关注
专栏目录
避坑18_Vue祖孙组件通过provide/inject异步传值，孙组件拿不到数据
linxwx的博客
11-15 2753
provide/inject的绑定并不是可响应的。需要传入了一个可监听的对象，该对象的属性是可响应的
vue 中使用 provide 和inject 组件见传值通信（实现页面刷新）
qq_37672347的博客
10-24 585
第一步： 在最顶层 app.vue中 写入下图代码 <template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template> <script> export default { name: 'App', p...
Vue当中子组件无法获取父组件值的情况
VVVZCS的博客
10-17 5319
parent.vue &lt;template&gt; &lt;div&gt; &lt;roles :roleData="item" v-for="item of roleData"&gt;&lt;/roles&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Roles
vue3使用provide和inject传递异步请求数据子组件接收不到
最新发布
qq_35641191的博客
09-12 562
vue3使用provide和inject传递异步请求数据子组件接收不到
vue3.0 provide, inject 异步，获取不到数据问题
热门推荐
weixin_44067333的博客
12-01 1万+
第一次尝试使用Vue3 开发項目 使用provide, inject 实现 父子通信 但是 异步数据在子组件中 inject获取不到：如下图 1.父组件使用axios获取数据 通过provide传递数据 2.子组件使用inject接收数据 3.控制台打印发现 输出undefined 测试发现不使用axios获取数据 直接使用provide传递静态数据 子组件inject可以接收到 查找解决问题 segmentfault中Ayers用户回答了该问题解决方法： 先provide，再赋值: setup()
provide和inject获取数据为空
weixin_47190975的博客
06-06 880
provide和inject获取数据为空
vue 父组件传参给子组件，而子组件获取不到
Zhong_zong_ming的博客
12-28 1620
如果在组件的created或mounted生命周期中定义要给方法，在子组件渲染时就获取父组件的传值，并进行新数据的获取并进行页面渲染，但此时父组件请求的数据可能还没有完全返回，子组件就开始使用此数据，该数据自然不存在，打印在控制台中的父组件穿给子组件的参数 undefined，因此就会出现父组件传参不及时，子组件使用数据较早，造成数据无法使用。使父组件从接口中获取的参数，有充分的时间传输，在子组件使用时，等待父组件的参数到来再执行，就不会出现拿不到父组件的传参问题了。1.setTimeout 定时器。
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
浅析vue中的provide / inject 有什么用处
10-16
`provide` 选项定义了祖先组件想要提供的数据，而 `inject` 选项则在子孙组件中声明要接收哪些注入的数据。 在使用 `provide` 和 `inject` 时，有两种基本的用法： 1. 直接返回一个对象，例如： ```javascript ...
vue父组件给子组件的组件传值provide inject的方法
10-16
Vue.js 的 `provide` 和 `inject` 是一种高级的数据传递机制，主要用于解决组件树中深层组件间通信的问题，特别是当不直接存在父子关系时。它们允许父组件提供一个值，而任何后代组件都可以通过 `inject` 来接收这个...
[vue2] 使用provide和inject时，无法获取到实时更新的数据
qq_14993591的博客
02-26 660
当vue文件中存在多级的父子组件传值（即：祖先向下传递数据）、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合无疑是很方便的一种做法了，但如此只是注入的初始值，并不能随时拿到数据源的实时更新。
vue3 使用provide inject父子组件传值传不过去且传递后子组件不具备响应性
黎小小的博客
03-24 3425
问题：在项目中一般是通过接口请求到数据后再传递给子级，provide和inject如果直接再调用接口的方法内传值会报警告，而且值也传递不过去。就是说provide()必须在setup根节点处才能使用，在方法里面用是不行的。但是，直接在setup根节点处传递，由于数据是异步获取的，直接传递时数据是还没有值的，传递过去的都是声明时的初始值。解决：使用方法包装需要传递的值，然后provide()传递过去的是方法，inject()时通过方法调用获取值。传递普通值，直接父级。
Vue2：使用provide和inject时，无法获取到实时更新的数据
qq_37485170的博客
09-13 910
当vue文件中存在多级的父子组件传值、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合出现一个问题，只是注入的初始值，并不能随时拿到数据源的实时更新。
vue-compositionAPI中使用provide，inject数据传递与接收
qq_39111074的博客
12-10 786
setup() 中 provide 和 inject 的使用 provide: // 从Vue对象中解构赋值，获得 provide const { provide } = Vue // 使用 provide provide('字段名', 字段值) inject: // 从Vue对象中解构赋值，获得 inject const { inject } = Vue // 使用 inject const 接收字段名 = inject('字段名') // 可以设置默认值，没有接收到数据时使用默认值，接收到数据就
vue3 provide传值 inject接收
qq_42957741的博客
11-04 541
父组件中定义参数，并使用 provide方法。子组件使用inject接收父组件的参数。
vue2 provide/inject实现响应式数据更新
yangzhibiaoXS的博客
05-13 1242
vue2 provide/inject 实现响应式数据更新
vue js中使用provide与inject传值
sssssnmmm的博客
07-15 694
正常情况下，我们传数据都是在父子组件中通过props的方式进行父子组件间的传值，这种方式传数据不能跨"辈"，如果想要从祖组件传数据到子组件需要一层层的传递，这样会显得很麻烦。上面的实例通过provide（）提供了一个值，这样后代组件就能通过inject来接收这个由祖父组件传递过去的值。时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数。provide与inject解决的是祖孙组件中传值的问题：把祖组件的数据直接传递到子组件。接收两个参数,第一个参数是要注入的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值