问题场景:
当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值?
在父组件中:
首先在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来管理。