props 传值问题（异步请求数据）

最新推荐文章于 2024-05-17 08:00:00 发布
最新推荐文章于 2024-05-17 08:00:00 发布
阅读量623 收藏
点赞数
分类专栏： 个人学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForestRoar/article/details/117436367
版权
在Vue.js中，当在异步请求内部通过父组件调用子组件的方法时，可能会遇到子组件props数据无法正常显示的问题。尽管props数据已传递，但在特定情况下无法正确访问。本文探讨了这个问题，分析可能是作用域导致的，并提供了解决方案——将异步操作置于async/await中，确保数据加载后再执行后续操作。此外，作者还表达了对网络上重复答案的困扰。
摘要由CSDN通过智能技术生成

异步请求内，使用父级调用子级方法，会导致子级 props里面的数据获取不到（实际是已经传过去了，你打印this会发现，是有的   但是一旦this具体数值  就拿不到了   原因位置    可能是作用域的问题）

这是我的代码

打印结果是这样的

最低0.47元/天 解锁文章
五夜痕霁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
props 变化导致新一次数据请求和页面展示更新效果在 react 新生命周期中的处理
m0_37148591的博客
05-20 3039
前言 日常积累，欢迎指正 正文 需求 有这样一个需求： props.planId 修改就要触发 getPlanDetailByPlanId(planId : string|number) 当然会相应有一个 state.data ,在 get 方法中根据 id 请求到正确的数据后再 setState({data}) 就能实现页面正确结果的显示啦！ 处理思路 在 react 未更新的版本中这种情况在生...
vue中使用props传值的方法
10-17
主要介绍了vue中使用props传值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue2父组件传递props异步数据到子组件的问题
12-29
测试环境：vue v2.3.3， vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据，想传递给子组件使用 父组件 [removed] import child from './child' export default { data: () => ({ asyncData: '' }), components: { child }, create
Springmvc中 同步/异步请求参数的传递以及数据的返回
热门推荐
bit-cafe
04-02 3万+
注意： 这里的返回就是返回到jsp页面, **** controller接收前台数据的方式，以及将处理后的model 传向前台***** 1、前台传递数据的接受：传的属性名和javabean的属性相同 （1）、使用基本类型，或引用类型进行接受： @RequestMapping(value="/select") PublicString  select(String name,int
详细分析Vue3中的props用法（父传子）
最新发布
码农研究僧的博客
05-17 5515
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
【实战】Vue 中 Props 值因异步获取导致的报错问题解析
weixin_33831196的博客
01-29 1455
问题简述 父子组件通过 props 传值，当所传值需要异步请求获取时，子组件在挂载完成阶段（mounted），拿不到props值 具体实例描述 父组件： <template> <div> <son :father-data="fatherData"/> </div> </template> <scr..
Vue 中 props的异步传递
Grey的博客
10-20 942
...
vue props传值失败 输出undefined的解决方法
10-18
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
props的传递是异步的
winxin_58206976的博客
10-26 331
props的传递是异步的 案例如下: 父组件 <template> <div class="approvals-container"> <Son :id="num" ref="refSon" /> <button @click="changeID">修改id</button> </div> </template> <script> import Son from './.
vue使用的props组件传值问题处理
weixin_33871366的博客
04-23 1503
Vue的父级组件与子组件,props传值,数据互动 背景: 一个修改密码弹窗的全局组件,父组件控制该全局组件显示状态,子组件控制隐藏状态. ps: props的vue官方文档很重要!!! 父级组件: <body> <div id="app"> //组件调用 <edit-pwd :is-show="isPwdShow"></edit-...
知识点：props的传递是异步的
haodanzj的博客
08-13 735
props的传递是异步的 目标 理解props的传递是异步的 问题 // 父组件 <son ref="refSon" :id="num" /> <button @click="changeID">修改id</button> data() { return { num: 1 } } methods: { changeID(){ this.num = 2 console.log(this.$refs.refSon.id) // 1 } } //
props传值遇Cannot read property getAttribute of undefined异常
奔跑的痕迹的博客
05-27 861
今有一个echarts 图标的子组件使用watch 监听接受父组件传入的data，而在父组件页面再次根据日期筛选数据，重新传入子组件进行图表重绘时老实会提示报错 vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'getAttribute' of undefined" found in 原来是异步加载数据切换的锅，.
vue中组件动态传值，实现数据实时更新
qq_33404590的博客
01-18 6061
vue组件动态传值，实时更新
[vue] prop更新不及时问题 不是最新的
qq_14993591的博客
01-19 1262
当我点击父组件的按钮时，发请求获取了数据并赋值给了info数组，点击事件代码在下面（解决修改代码过程）子组件：通过props接收了父组件传过来的数组；它后一个方法，获取最新的数组值。父组件：通过props向子组件传递了一个数组info。
为什么props接收的值为undefined
weixin_43239880的博客
10-21 6653
在项目中,我们会经常使用到props传值,经常是由父组件传递给子组件一个值,然后我们在子组件中想去使用这个props接收的值,但是在created和mounted中打印,却发现是初始值或者为undefined,并不是我们在父组件中发送异步请求拿到的那个值.但是通过setTimeout设置了一定的时间之后,我们又能拿到对应的值.这是什么情况呢?解决4：使用v-if来判断,这样子在子组件中的created中就可以将有值的transData打印出来了。请求回来的, 请求的这个过程是需要时间的，但是。
更改数据时，使用props传递的子组件不更新的问题
m0_57013518的博客
03-08 1494
解决办法：在子组件中添加watch监听，监听props，再将值赋给需要更新的数据就行了。使用forceUpdata也无效，因为在更改数据时，子组件已经渲染了。
vue 父子组件传值,子组件获取不到props值
潇湘子的博客
08-31 9286
问题: 父组件props传值给子组件，子组件在created中获取不到传过来的值 关于props传值，这里不赘述直接看官网：https://cn.vuejs.org/v2/guide/components-props.html 分析：因为父组件props传给子组件的值是通过后端接口返回的数据，也就是说是异步返回的数据，那么问题来了，你怎么知道后端什么时候请求完成，然后完成赋值呢？所以导致取值不同步，当然获取不到。 解决方案： 1.可以用setTimeout来延时，等异步请求数据完成了，在赋值(不推荐) 写一
props传值是数据类型
03-30
props 传值是一个对象类型，其中包含了组件需要的数据和方法。这个对象包含了键值对，键是组件需要的数据和方法的名称，值是对应的数据和方法。在组件内部，可以通过 this.props 访问这个对象，获取其中的数据和方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值