由于父组件中的数据是异步获取的，而子组件在一开始便会渲染，所以会造成子组件渲染完成后，数据还未获取到的情况

这里有一个简单的解决方案：在子组件渲染前，判断父组件数据是否获取完成，数据获取完成后再渲染子组件

tab-weekly(v-if="userId", :userId="userId")

如上代码，tab-weekly是子组件，userId是在父组件中异步获取、需要传递给子组件tab-weekly的数据，在其中加一个判断，当userId存在后，再渲染子组件

关于Vue父组件把异步获取的数据传给子组件的问题的更多相关文章

  1. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  2. vue---父调子 $refs （把父组件的数据传给子组件）

    ps:App.vue 父组件 Hello.vue 子组件  App.vue  : <template> <div id="app"> <input t ...

  3. Nuxt.js 如何在 asyncData中 请求数据 ，并将拿到的数据传给子组件

    说明:同接口请求一样,也可以进行数据的处理:return  中 左侧的变量  可以直接拿到在页面上使用,也可以传递给子组件 下面再给出一段代码,方便觉得有用的.却又不想手敲的朋友们: async as ...

  4. Vue父组件传递异步获取的数据给子组件

    问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...

  5. vue中子组件需调用父组件通过异步获取的数据

    原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...

  6. Vue等待父组件异步请求回数据'后'传值子组件

    问题: 让子组件在父组件有哪个数据的时候再渲染, 解决方案: 可以在父组件上加一个判断条件, 举例说明: <a-component :opt="opt" v-if=" ...

  7. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

  8. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  9. 使用 antd Table组件， 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

随机推荐

  1. 简易的CRM系统案例之易的CRM系统案例之JSP+MySQL+SSH框架版本

    主要对上一篇hibernate与Spring进行整合改进 简易的CRM系统案例之Struts2+Hibernate3+JSP+MySQL版本 bean-base.xml <?xml versio ...

  2. Keyframe类-动画中关键帧概念

    package com.loaderman.customviewdemo; import android.animation.Animator; import android.animation.Ke ...

  3. ContextCleaner ——Spark 应用程序的垃圾回收器

    ContextCleaner是一个Spark服务,负责在应用程序范围内清除 shuffles, RDDs, broadcasts, accumulators和checkpointed RDDs,目的是 ...

  4. 用Dev C++编写第一个C语言程序

    不少新同学表示对计算机类专业有些担忧,那么可以趁军训期间提前玩玩. 学校一般使用VS2008进行编程,VS2008功能强大,内容丰富,体积也比较大.如果只关注C语言编程的话,有一个非常轻便的软件Dev ...

  5. LeetCode_69. Sqrt(x)

    69. Sqrt(x) Easy Implement int sqrt(int x). Compute and return the square root of x, where x is guar ...

  6. Linux使用shell解压tar.Z格式文件

    建设当前目录下有一个名为test.tar.Z的文件. 使用如下指令可以将其解压,并将解压后的所有文件放置在当前目录下: zcat test.tar.Z | tar -xvf - 如果想要将解压缩的文件 ...

  7. 心の壁 From EOE：Air / 真心为你

    https://www.bilibili.com/bangumi/media/md10272/ 真嗣:我问你. 凌波:什么? 真嗣:梦到底是什么呢? 凌波:梦? 真嗣:我不太明白什么是现实. 凌波:你 ...

  8. OWASP TOP 10（OWASP十大应用安全风险）

    TOP1-注入 当不受信任的数据作为命令或查询的一部分发送到解释器时,会发生注入漏洞,例如SQL,NoSQL,OS,LDAP注入(轻量目录访问协议),xpath(XPath即为XML路径语言,它是一种 ...

  9. 【数据库开发】在Windows上利用C++开发MySQL的初步

    [数据库开发]在Windows上利用C++开发MySQL的初步 标签(空格分隔): [编程开发] Windows上在上面配置环境的基础上开展一个小demo链接数据库,没想到中间也出现了这么多的问题,简 ...

  10. 批量添加删除Windows server DNS服务 恶意域名 * A记录 指向 127.0.0.1（2019年6月5日更新）

    下载链接:https://pan.baidu.com/s/1OUHyvnIfXYF0PdiT-VRyHw  密码:7gjj 注意!本解决方案在本地的Windows server服务器上把恶意域名指向1 ...