问题场景:

当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值?

在父组件中:

首先在data()中定义data_detail为空:

data(){
data_detail: {}
}

然后将data_detail传递给子组件

<enterpriseDetail :data_item='data_detail'></enterpriseDetail>

data_item是在父组件中异步请求的数据:

searchDataDetail(){
var self = this;
self.data_detail_loading = true
var param = {}
param.data_id = self.search_history[0].data_id
param.data_type = self.search_history[0].data_type
param.search_name = self.search_history[0].search_name self.api.searchDataDetail(param).then(function(res) { if(res.errcode == 0){
self.data_detail = res.data
self.data_detail_loading = false
}else{
self.$store.commit('newMsg',res.errmsg)
}
})
},

在子组件中:

通过props接收父组件传递过来的值:

props: ['data_item']

当父组件的异步请求为loading状态的时候,data_item的值为空,此时子组件获取的也是空值,有时候需要用到data_item传递过来的值作为参数,这时就会获取不到data_item.enterprise_name这个参数

mounted() {this.checkDataexist()
}
   checkDataexist(){
let that = this
let param = {
data_type: "enterprisecreditreport",
data_info: that.data_item.enterprise_name
} axios.post('/data/checkdataexists', param).then((res) => {
if(res.data.errcode === 0){
that.report_data = res.data.data
}else{
that.$store.commit('newMsg', '获取报告信息失败')
}
})
}

解决方案:

1.在父组件中加上v-if属性:

<enterpriseDetail v-if='data_detail.enterprsie_name' :data_item='data_detail'></enterpriseDetail>

2.在子组件中用watch监听数据变化后再调用函数

watch: {
data_item(val,newVal){
this.$nextTick(() => {
this.checkDataexist()
})
}},

如果上面两种方式都不能解决问题的话,那就用vuex来管理。

Vue父组件传递异步获取的数据给子组件的更多相关文章

  1. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  2. vue中子组件需调用父组件通过异步获取的数据

    原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...

  3. 关于Vue父组件把异步获取的数据传给子组件的问题

    由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...

  4. 详解vue父组件传递props异步数据到子组件的问题

    案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...

  5. [转]详解vue父组件传递props异步数据到子组件的问题

    原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...

  6. Vue 父组件ajax异步更新数据,子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  7. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  8. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  9. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

随机推荐

  1. Vue.js环境配置

    一.安装node.js 自行下载安装 https://nodejs.org/en/ 二.查看版本,更新版本 查看node版本 node --version 查看npm版本 npm --version ...

  2. Spring aop框架使用的jar包

    除了前两个jar包,后面的jar包spring框架包中都有,前两个jar包的下载地址:https://pan.baidu.com/s/1L-GLGT1c8vnwFwqLxzzZuw

  3. mysql中加入海量数据

    delimiter // create procedure m() begin declare num int; set num=1; while num < 100000 insert int ...

  4. admob sdk

    https://support.google.com/admob/answer/2993059?hl=zh-Hans admob sample http://china.inmobi.com/sdk/ ...

  5. Delphi Excel导入 的通用程序

    步骤: 1 连excel(自己知道其格式,最好是没个字段在数据一一对应) 2 读excel数据,填入到数据库 我这里有个函数,实现把excel表格中数据导入数据库,在一条数据导入前判断数据库中是否有该 ...

  6. spring 装配

    spring 3种装配方式: 支持混合配置:不管使用JavaConfig还是使用XML进行装配,通常都会创建一个根配置(root configuration), 这个配置会将两个或更多的装配类和/或X ...

  7. Redis-07.Spring Data整合Jedis

    Spring整合Jedis 1.单实例(想节约时间的请直接拖到下面跳过1.2部分) step1:毫无疑问,首先需要在pom.xml中配置Jedis依赖 <dependency> <g ...

  8. Virtual Networking

    How the virtual networks used by guests work Networking using libvirt is generally fairly simple, an ...

  9. [转]Comparing sFlow and NetFlow in a vSwitch

    As virtualization shifts the network edge from top of rack switches to software virtual switches run ...

  10. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...