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

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

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. pytorch中的学习率调整函数

    参考:https://pytorch.org/docs/master/optim.html#how-to-adjust-learning-rate torch.optim.lr_scheduler提供 ...

  2. 使用Docker快速搭建Tensorflow开发环境

    当我刚开始学习使用scikit-learn时,总是会出现各种各样的包依赖问题,兜兜转转了一遍才全部安装好,现在的机器学习算法开发者大都使用tensorflow.pytorch来实现自己的想法,但依然会 ...

  3. Qt自定义类重写 copy

    PtsData PtsData::copy(const PtsData &ptsData) { PtsData ptsData1; ptsData1.data_b = ptsData.data ...

  4. Linux -- PHP-FPM的源码解析和模型

    1．进程管理模式 PHP-FPM由1个master进程和N个worker进程组成.其中,Worker进程由master进程fork而来. PHP-FPM有3种worker进程管理模式. 1. Stat ...

  5. 123456123456#0#-----com.threeapp.JiQiRenDaZhan01----机器人大战恐龙

    com.threeapp.JiQiRenDaZhan01----机器人大战恐龙

  6. python中 将数字转化为人民币的形式

    def fn(args): """ 将金额转化为人民币模式,带逗号分隔,保留小数点两位,四舍五入 :param args: :return: ""&q ...

  7. Vue-cli安装，创建Vue项目

    1.安装脚手架: npm install -g vue-cli 2.查看vue: vue 3.查看可以使用的模板: vue list 4.创建项目sell: vue init webpack sell ...

  8. Git操作记录、腾讯工蜂

    腾讯工蜂: http://git.code.tencent.com 登录-->>创建项目-->>获取仓库路径 https://git.code.tencent.com/dang ...

  9. eclipse 解决POM文件错误：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project.MavenProject, org.apache.maven.archiver.MavenArchiveConfiguration)

    解决方案: 更新eclipse中的maven插件 1.1 Help -> Install New Software -> Add 1.2 Location中输入 http://repo1. ...

  10. laravel 小知识点

    分块导出brokerageCharge = DB::table('表名')$brokerageCharge = $brokerageCharge->chunk(100,function($bro ...