在写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. Python3之pickle模块

    用于序列化的两个模块 json:用于字符串和Python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 json提供四个功能:dumps,dump,l ...

  2. win7下钩子失效解决方案

    win7键盘钩子失效解决方法:1.win开始右键+r(运行) 2.将其输入regedit.exe(注册表管理器),回车打开注册表管理器 3.进入HKEY_LOCAL_MACHINE4.进入到SYS ...

  3. C# winform间窗体传值简单Demo

    form1是用来接收值的 using System; using System.Collections.Generic; using System.ComponentModel; using Syst ...

  4. [国家集训队]部落战争 最大流 BZOJ2150

    题目描述 lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国的下部征战来获得更大的领土. A国是一个M*N的矩阵,其中某些地方是城镇,某些地方是高山深涧无人居住.lanzerb把 ...

  5. screen虚拟终端

    screen命令相当于后台执行(虚拟终端) 用法:在一些要执行很久的操作,比如我有个文件有10个G,要传输一天左右,你如果是直接传输,万一你的连接断了.是不是意味着你的操作白费的呢,这时我们可以打开一 ...

  6. 搭建git服务器(临时服务器,命令行形式,针对2到5人左右,轻量)

    服务端配置 ############################################################################################## ...

  7. explian执行计划

    MySQL为我们提供了 explain 关键字来直观的查看一条SQL的执行计划. explain显示了MySQL如何使用索引来处理select语句以及连接表,可以帮助选择更好的索引和写出更优化的查询语 ...

  8. 打开页面时就提交,可以做一些自动登陆 还有SICLOGIN的测试代码

      <HTML> <head> <title> Untitled Document</title > (1)自动提交表单: <meta http- ...

  9. MongoDB基本语句

    1.创建数据库      use  库名 2.查看所有库      show dbs 3.定义一个对象变量,下面挂着数据 4.col 是集合名,如果该集合不在该数据库中, MongoDB 会自动创建该 ...

  10. centeros下安装python3

    一.查看python版本及安装python3 1. which python 可以看到预装的是2.7版本 2.安装依赖包 yum -y groupinstall "Development t ...