关于解决父子组件传参异步的问题

最新推荐文章于 2022-12-07 17:46:35 发布
最新推荐文章于 2022-12-07 17:46:35 发布
阅读量386 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52703823/article/details/116704728
版权

我所碰到的项目是播放视频直播的项目 每次点击视频列表的时候第一次组件传参是没问题的 但是第二次组件传参的时候 正在通过axios请求数据的过程中，子组件所拿到的数据没有发生改变（axios请求还没有完成）这时候子组件是默认不发生任何改变的 以至于后面每一次视频的变化 需要重复点击两次才更更改传到子组件的值（也就是axios完成请求时数据发生了变化后）

具体解决办法如下 ：

给子组件套上一个key值 在每次axios请求完成以后，更改key值以至于达到子组件更新的目的

赋值完成 子组件key值改变 刷新子组件 问题解决 

需要注意的是key值最好不要写死 不然每次key值没有发生变化 子组件不会发生改变

poanpanx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue同步父子组件和异步父子组件的生命周期顺序问题
12-12
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/...
Vue父组件给子组件props传参时涉及异步(父组件中发送请求调用了then方法)
Clearlove_2019的博客
10-21 854
父组件在异步操作中向子组件传参，但子组件中mounted在未接收到数据时需要进行一些操作该如何处理
父组件传值给子组件（异步）
qq_42885702的博客
11-11 2025
一、父子组件生命周期函数运行顺序 *父created ----> 父beforemouted -------> 子created -------> 子beforemouted ----- ---->子mouted --------> 父mouted* 二、父子组件异步传值的坑 子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子...
Vue 子组件与父组件之间传值
逐梦十年的博客
07-29 1万+
1.父组件与子组件传值props 1.1定义父组件，父组件传递msg这个数值给子组件(子组件接收到为msgVal): 1.2定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。 注意：父子组件传值，数据是异步请求，有可能数据渲染时报错 原因：异步请求时，数据还没有获取到但是此时已经渲染节点了 解决方案：可以在父组件需要传递数据的节点加上 v-if = isReady(isReady默认为false），异步请求获取数据后（..
vue 父传子 props异步造成的问题，及解决方案
m0_58861443的博客
08-14 2299
创建后created 发送请求，获取数据，点击取消后，创建的组件没有被销毁，（编辑数据，由于数据回填动作写在created中，子组件用dialog包裹，导致数据回填不正确，props的执行是异步的） 解决方法1 v-if 销毁重建。会自动执行created 在组件上创建属性 v-if =“showDiaglo” ，关闭弹出层后进行组件销 解决方法2 在父组件里，点击编辑后，找到子组件，调用获取详情方法 如何在父组件中调用子组件方法 ref 父组件 this.$refs.子组件名字.方法 子组件添
vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法
Hiroshi's
03-11 5414
做项目时候遇到一件怪事： 父组件向子组件<dialog-info/>传个参数arrdata，是个数组 因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组 然后子组件中例行公事验证下是否正常拿到值 惊呆了，竟然是空的数组！ 可是vue调试工具中props正常拿到了啊 有点意思，后来根据项目结构想了一下，发现问题出在哪里了 项目是这样的： 这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示<DialogInfo>子组件 而父组
Angular父子组件通过服务传参的示例方法
10-17
主要介绍了Angular父子组件通过服务传参的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE 父子组件传递
02-23
HTML编码中，利用了Vue框架，在该框架下父子组件直接经常需要进行数据传递
vue非父子组件通信问题及解决方法
08-27
主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue问题：父传子时传递的值接收有延迟
m0_74802419的博客
11-13 3458
由于父组件在给子组件传递的值是请求回来的，所以会有延迟，而这时子组件也初始化完毕，导致子组件接收的值是父组件初始化时创建的默认为空的初始值。在父组件中给子组件标签加上v-if判断一下，判断要传递的值不为空时，再初始化子组件，就可以接收到父组件请求回来的值。父组件要向子组件传递接口请求回来的数据，然后在子组件中将props接收到的数据渲染到输入框内，操作非常非常简单，但是我发现不管怎么搞，渲染的值都是父组件中定义的初始空值。父组件给子组件传递的值是请求回来的，所以可能会有延迟。| 广场舞大军中最靓的仔。
vue父子组件传值：异步传输数据的问题
Liubingzhe
12-07 1106
vue
vue---父子组件传输异步数据
wlijun_0808的博客
06-16 4716
vue---父子组件传输异步数据
【vue】组件传值异步问题--子组件拿到数据较慢
Triumph_light的博客
04-03 3050
问题的出现: 之前写静态页面的时候，直接父向子传值，是直接能渲染出父组件给子组件的值，但是加上请求之后，就出现了一个问题，就是在组件创建和渲染完毕时，子组件的值才拿到，子组件并没有实时的更新模版（简直就是灾难始终慢我一步！！！） 产生的原因： 子组件中的created、mounted只执行一次，在父组件初始化时，已经给子组件传了一个空值，导致异步请求数据发生变化时，子组件的值不再变化。 解决办法： 就是让他没有发请求拿到数据时，不让他去创建子组件给它传值，因此给其加一个v-if指令来限制他是否能创建子组件，
解决vue父组件异步获取动态数据传递给子组件，子组件无法获取值的问题
spring_007_999的博客
12-03 2256
父组件动态传值给子组件获取不到的问题解决方法
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
m0_46627407的博客
07-06 9612
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
关于组件异步传值子组件获取不到父组件传递过来值的问题
weixin_44132285的博客
02-23 3392
1.问题描述 父组件异步传值给子组件 子组件第一次接收不到 在此处我传递了一个listinfos值过去给子组件 2.分析问题 1.首先异步问题是由数据传递过来组件已经渲染完成（数据更新后 组件没有进行重新渲染） 2.其次是要判断是否为异步问题，可以再子组件mounted中写一个延时器 延迟获取一下组件的值（如果定时器里面可以获取到，外部获取不到undefined）则证明是异步问题 3.解决问题 可以判断一下父组件中这个值是否取到 如果取到再去渲染组件（这样就可以避免组件渲染渲染完成 值未及时更新）
vue组件通信，点击传值，动态传值（父传子，子传父）
热门推荐
Dreamer_xr的博客
10-23 2万+
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！ 一、父组件传子组件，核心--props 下面是场景，点击传值给子组件 在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...
vue中异步请求到的数据父向子传值如何动态传递
weixin_55764371的博客
11-11 1198
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated。当数据请求过来的时候子组件已经渲染这个时候传递过去的数据是空的。
vue中echarts父子组件异步传值
weixin_52919504的博客
09-27 1509
vue中echarts父子组件异步传值
vue父子组件传参 required
最新发布
08-23
- *1* *3* [vue父子组件传参的4种方式](https://blog.csdn.net/glorydx/article/details/112247747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值