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

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

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. Mac升级Node.js和npm到最新版本指令

    一.查看本机当前Node.js和npm版本 node -v npm -v 二.清除node.js的cache sudo npm cache clean -f 三.安装"n"版本管理 ...

  2. Ionic4.x 项目结构简单分析

    新建项目 e2e:端对端测试文件 node_modules :项目所需要的依赖包 resources :android/ios 资源(更换图标和启动动画) src:开发工作目录,页面.样式.脚本和图片 ...

  3. 【406】C语言相关函数

    <stdlib.h>(1) <stdlib.h>(2) malloc() 用来动态地分配内存空间,分配成功返回指向该内存的地址,失败则返回 NULL. 前面的 (int*) 或 ...

  4. CentOS7下搭建SVN服务器

    (1).安装SVN 1)安装SVN [root@youxi1 ~]# yum -y install subversion mod_dav_svn [root@youxi1 ~]# cat /etc/s ...

  5. (十四)用session和过滤器方法检验用户是否登录

    一.session方法 1.1 编写登录页面文件(index.html) <!doctype html> <html> <head> <title>测试 ...

  6. Java读取Excel文件（包括xls和xlsx）的样例程序

    样例程序如下所示,其中: parseXls()函数依赖于jxl,只能读取xls格式文件: parseExcel()函数依赖于apache poi,能够读取xls和xlsx两种格式的文件. jxl的依赖 ...

  7. C# Newtonsoft.Json JObject 操作

    C# Newtonsoft.Json JObject 操作举例 JArray j = new JArray(); JObject obj = new JObject( ") ); JObje ...

  8. Golang 异常/日志处理

    1.xerrors 异常 xerrors 包是一个非常棒的设计,不同于往常语言如java/php,因为go的errors只是一个string类型的映射,所以内存占用空间很少.这在golang的核心库和 ...

  9. windows服务器入门 php的安装

    下载PHP安装包(下载地址: http://windows.php.net/download/ ),本文档以5.3版本为例,选择如下图对应的安装包: 下载完成后进行安装PHP,需要选择Web服务时,选 ...

  10. 日常工作问题解决：rhel7下配置多路径设备

    目录 1.情景描述 2.安装多路径软件 2.1 安装多路径 2.2检查安装情况 2.3 重启系统 2.4 将多路径软件添加至内核模块 2.5 检查内核添加情况 2.6 启动multipath服务 2. ...