记录一次使用vue父组件向子组件异步传递数据的坑

最新推荐文章于 2022-06-16 20:52:12 发布
最新推荐文章于 2022-06-16 20:52:12 发布
阅读量358 收藏 1
点赞数
文章标签： vue react 小程序 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44022064/article/details/108218344
版权

1、正常的props 子组件接受数据是没有问题的
2、当我们父组件的数据是异步获取的传递给子组件时，此时就会报underfined的错误
3、解决办法就是，渲染子组件的时候，我们可以在子组件渲染数据区域的最外层包裹一层，判断我们传递过来的数据是否存在，存在则渲染，不存在不熏染，
分享使我快乐

weixin_44022064
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解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
父组件传值给子组件（异步）
qq_42885702的博客
11-11 2009
一、父子组件生命周期函数运行顺序 *父created ----> 父beforemouted -------> 子created -------> 子beforemouted ----- ---->子mouted --------> 父mouted* 二、父子组件异步传值的坑 子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子...
vue解决组件传值异步问题
热门推荐
qiqi学习园地
04-28 1万+
转载自：http://www.jb51.net/article/117447.htm 案例一 父组件parent.vue // asyncData为异步获取的数据，想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> &..
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题
weixin_43290151的博客
05-24 9598
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题 问题描述 组件化开发中经常用到父子组件的通信，父传子子传父等数据的操作，如果父组件的数据是发请求从后端获取的异步数据，那么父组件将这个数据传递给子组件的时候，因为是异步数据，就会出现父组件传递过去了，但是子组件mounted钩子初始情况下是接收不到的问题。本篇文章记录了一下这个问题的解决方案。 在说这个问题之前，我们先来回顾一下父子组件的生命周期 父子组件生命周期执行顺序 加载渲染数据过程父组件 beforeCreate -
vue---父子组件传输异步数据
wlijun_0808的博客
06-16 4698
vue---父子组件传输异步数据
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
Vue.js中使用Vuex实现组件数据共享案例
11-19
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一、安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store –save 二、使用 main.js store.js .vue文件 ...
关于Vue组件通信的面试题
最新发布
12-31
要求通过父组件向子组件传递数据，并且子组件能够通过事件通知父组件某个操作已经完成。 题目解析： 在该示例中，父组件通过props属性向子组件传递message数据，并通过@childOperationCompleted事件监听子组件操作...
vue父组件向子组件传递异步加载的数据不显示解决方案
caixiajia的专栏
11-02 7239
1、父组件 <wxChat :data="wxChatData" :showShade="false" :contactNickname= doctor.doctorName :ownerAvatarUrl="ownerAvatarUrl" :c...
vue 中父组件怎么将异步请求回来的数据传递给子组件
weixin_46185369的博客
10-30 6718
问题： vue项目中，如何将后台请求回来的数据，传递给子组件呢？ 思路 此时肯定会想到v-bind自定义属性传值，子组件props来接收，但是很可惜，如果只是按照普通的父传子做法来做，最后的结果是子组件拿到数据的初始值，并没有拿到数据，然后报错 invalid prop 原因 原因很简单，还没有等到父组件赋值给它就已经把data里面这个自定义属性所绑定的初始值传过去了， 就是下面代码中的article，没有等到后台数据赋值article就把data里的article（null）传过去了。 代码实现 父组件
Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理
IT全栈 华强工作室
04-11 7739
问题描述 父组件通过Promise等其他异步方式获取异步数据，并传递给子组件，子组件直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。 原因分析 父组件通过Promise等其他异步方式获取异步数据，在尚未等到数据返回时，子组件 created已经执行完毕，故此时子组件中的数据为父组件上次的数据。 父子组件的生命周期： 一、加载渲染过程 父beforeCreate–> 父cre...
（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题
小人物的点点滴滴
11-07 4947
子组件的渲染时间比父组件的渲染时间快导致数据的问题 问题：父组件的在mounted钩子函数中拿接口的数据 ，然后渲染给子组件；因为子组件渲染的速度比父组件快，所以子组件的pros内的数据是空的 解决问题如下： 父组件页面》把请求接口的函数放在Vue.$nextTick()内 子组件页面》监听父组件传过来的数据 如果数据发生变化就渲染 父组件页面： <template> <di...
vue组件的生命周期
weixin_34004750的博客
04-17 337
Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。 1、beforeCreate 　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。 2、created 　　实例已经创建完成之后被调用。在这一步...
关于解决父子组件传参异步的问题
m0_52703823的博客
05-12 386
我所碰到的项目是播放视频直播的项目 每次点击视频列表的时候第一次组件传参是没问题的 但是第二次组件传参的时候 正在通过axios请求数据的过程中，子组件所拿到的数据没有发生改变（axios请求还没有完成）这时候子组件是默认不发生任何改变的 以至于后面每一次视频的变化 需要重复点击两次才更更改传到子组件的值（也就是axios完成请求时数据发生了变化后） 具体解决办法如下 ： 给子组件套上一个key值 在每次axios请求完成以后，更改key值以至于达到子组件更新的目的 赋值完成 子组件key值改
vue学习记录——父子组件间传递数据
Alisa_lifang的博客
02-26 239
在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props向下传递数据给子组件，子组件通过 events 发送消息给父组件。demo的目录结构如下：demo显示效果如下;一、父组件向子组件传递数据（父组件通过props向子组件传递数据）父组件的代码如下图：父组件中定义一个object，通过v-bind自定义属性parentData绑定到控件上，通过p...
vue父组件获取异步数据传递给子组件
04-05
可以通过以下步骤实现： 1. 在父组件中定义一个异步函数，用于获取数据。 2. 在父组件的created钩子函数中调用异步函数，...子组件中定义了一个props，用于接收父组件传递过来的数据，并在模板中使用v-for渲染数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值