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

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

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. SQL-W3School-函数:SQL MAX() 函数

    ylbtech-SQL-W3School-函数:SQL MAX() 函数 1.返回顶部 1. MAX() 函数 MAX 函数返回一列中的最大值.NULL 值不包括在计算中. SQL MAX() 语法 ...

  2. osg 添加 fbx插件 osg中编译fbx

    使用osg加载fbx模型,需要自己编译fbx插件,编译流程与插件使用案例如下 代码地址:https://github.com/shelltdf/osgFBX CMake Error: The foll ...

  3. React vs. Angular vs. Vue

    原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...

  4. python检测文件的MD值

    使用hashlib模块,可对文件MD5一致性加密验证: #python 检测文件MD5值 #python version 2.6 import hashlib import os,sys #简单的测试 ...

  5. LeetCode_168. Excel Sheet Column Title

    168. Excel Sheet Column Title Easy Given a positive integer, return its corresponding column title a ...

  6. LeetCode_110. Balanced Binary Tree

    110. Balanced Binary Tree Easy Given a binary tree, determine if it is height-balanced. For this pro ...

  7. SQL Server 2008中的代码安全===主密钥

    在SQL Server中的加密由层次结构形式进行处理以提供多级别的安全.SQL Server包含两个用于加密数据的密钥类型.如下图: 1.服务器主密钥(Service Master Key),位于层次 ...

  8. 深入理解隐马尔可夫(HMM)模型

    1.安装依赖包hmmlearn 直接pip install hmmlearn可能会报错(安装这个模块需要使用C环境编译) 可以尝试用 conda install -c omnia hmmlearn安装 ...

  9. sklearn.svc 参数

    sklearn.svc 参数 sklearn中的SVC函数是基于libsvm实现的,所以在参数设置上有很多相似的地方.(PS: libsvm中的二次规划问题的解决算法是SMO). 对于SVC函数的参数 ...

  10. SCART概念

    SCART(Syndicat des Constructeursd' Appareils Radiorécepteurs et Téléviseurs)接口是一种专用的音视频接口,它是由法国公司Per ...