问题场景:

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

在父组件中:

首先在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. python列表和字符串的三种逆序遍历方式

    python列表和字符串的三种逆序遍历方式 列表的逆序遍历 a = [1,3,6,8,9] print("通过下标逆序遍历1:") for i in a[::-1]: print( ...

  2. Centos7配置hadoop伪分布式

    修改hostname(可选) 通过下面命令查看hostname信息 hostnamectl 通过下面命令修改hostname hostnamectl set-hostname gy01 如图所示 下面 ...

  3. ionic3 百度地图插件定位 问题

    每次用 cordova-pluin-baidumaploaction    每调用一次  他只会执行一次 我想循环  但是每次都会初始化   把插件的java代码98行注释就好了

  4. Runtime "Apache Tomcat v6.0 (3)" is invalid. The JRE could not be found. Edit the server and change the JRE location解决方案

    使用eclipse,启动Tomcat时出现The JRE could not be found ,Edit server and change teh JRE location的错误提示! 原因:重装 ...

  5. IntelliJ IDEA 和谐地址及快捷键

    转载:http://my.oschina.NET/dyyweb/blog/494504 http://blog.csdn.net/tanlon_0308/article/details/5085473 ...

  6. Linux shell脚本学习(一)

    一.shell脚本简介 shell脚本是用shell脚本语法将shell命令组织起来形成的文件形式.Shell脚本与Windows/Dos 下的批处理相似,主要为了将大量命令通过一个纯文本文件一次执行 ...

  7. Python学习笔记-函数基础

    函数基础 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 为什么使用函数:减少重复代码.使程序变的可扩展使程序变得易维护 1.定义一个函数 #定 ...

  8. PackageManager整理

    一.PackageManager的功能 1.安装.卸载应用.2.查询permission相关信息.3.查询Application相关信息(application,activity,receiver,s ...

  9. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  10. Silverlight多重表头实现

    效果: 实现主要逻辑:通过动态拼接XML生成表头样式,绑定到列上. 主要是动态拼接XML时要仔细核对对应的占位行,具体可以看代码,注释很详细 两个类一个接口 NTree<T>:定义表头树形 ...