在写vue项目的时候,父组件调用ajax的接口获得数据,然后赋值给data中的初始值,然后通过props传给子组件,子组件在created的时候,获得的props的值有的时候是undefined,因为ajax是异步请求,执行的http线程,js线程执行的过程可能还没有值的返回.

保证在子组件created的时候也有值,解决方案是在父组件中调用子组件的时候写一个v-if,在ajax值返回的时候再v-if=‘true’解决

//父组件中
<v-child :data='data' v-if='flag'></v-child> methods:{
init(){
this.axios.get().then((res)=>{
this.data=res.data;
this.flag=true
})
}
} //子组件 props {
data: {
type: Object,
default: function () {
return { message: 'hello' }
}
}
} created(){
this.init()
}

  

props的异步加载问题的更多相关文章

  1. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  2. react异步加载组件

    1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...

  3. React.lazy和React.Suspense异步加载组件

    在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() ...

  4. winform异步加载数据到界面

    做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...

  5. 【Android】纯代码创建页面布局(含异步加载图片)

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  6. 【代码笔记】iOS-实现网络图片的异步加载和缓存

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

  7. 使用jOrgChart插件, 异步加载生成组织架构图

    jOrgChart插件是一个用来实现组织结构图的Jquery的插件- 一.特点 1.支持拖拽修改子节点: 2.支持节点缩放展示: 3.方便修改css定义样式: 4.超轻量型: 5.兼容性好,基本支持所 ...

  8. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  9. Android-Universal-Image-Loader 图片异步加载类库的使用

    在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...

随机推荐

  1. 20165224 陆艺杰 Exp5 MSF基础应用

    用自己的话解释什么是exploit,payload,encode Exploit是攻击的行为 Payload是一段植入目标机的简短的带功能的恶意代码 Encode是编码,用于更改恶意代码,编码特征码检 ...

  2. redis中使用lua脚本

    lua脚本 Lua是一个高效的轻量级脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能 使用脚本的好处 1.减少网络开销,在Lua脚 ...

  3. Qt 学习之路 2(45):模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(45):模型 Qt 学习之路 2(45):模型  豆子  2013年2月26日  Qt 学习之路 2  23条评论 在前面两章的基础之上,我们 ...

  4. 使用octave符号运算求解不定积分、微分方程等(兼容matlab)

    1.求解1/(1+cos(x))^2的不定积分. 在和学生讨论一道物理竞赛题的时候,出现了这个函数的积分求解需求.查积分表也可写出答案.但是可以使用octave的符号运算工具箱来做. syms x; ...

  5. LeetCode记录之26——Remove Duplicates from Sorted Array

    国外的表达思维跟咱们有很大差别,做这道题的时候很明显.简单说本题就是让你把有序数组中的重复项给换成正常有序的.比如 1 2 2 3换成 1 2 3 3,根本不需要考虑重复的怎么办,怎么删除重复项等等. ...

  6. P4219 [BJOI2014]大融合

    传送门 动态维护森林 显然考虑 $LCT$ 但是发现询问求的是子树大小,比较不好搞 维护 $sum[x]$ 表示节点 $x$ 的子树大小,$si[x]$ 表示 $x$ 的子树中虚儿子的子树大小和 那么 ...

  7. 解决分批次调用 jsonp 接口的 callback 会报错问题

    当我们分批次调用同一个jsonp接口时,会有一定机率同时调用,而jsonp的callback不支持同时调用, 会报错,所以当我们在分批次调用同一jsonp接口时,最好在callback后加个变量值,总 ...

  8. 给JFinal添加 Sqlite 数据库支持

    [转自] http://my.oschina.net/u/237078/blog/69934 Sqlite 的单文件便携性.高性能在开发中方便性无与伦比,即使部署在中小型应用中也胜任有余. 在JFin ...

  9. Oracle PL/SQL之GROUP BY GROUPING SETS

    [转自] http://blog.csdn.net/t0nsha/article/details/6538838 使用GROUP BY GROUPING SETS相当于把需要GROUP的集合用UNIO ...

  10. 给新人看的 JavaScript的继承

    //这个继承方式是给新人看的,逻辑简单一些 Object.extend=function(props){ //继承父类 var prototype=Object.create(this.prototy ...