涉及到的知识点：钩子函数mounted和created的区别：先看问题，父组件从后端通过$ajax获取数据，在将父组件将值传输给子组件，使用子组件使用created钩子函数获取数据，按自己的想法应该是父组件先获取后端数据，在传入给子组件，可是事实是，子组件先获取数据，父组件在从后端获取数据，这样的话子组件就没有数据获取为空。
父页面:
<template>
<view class="approval-datails">
<view class="information"> <!--申请信息-->
<uni-collapse ref="collapse" @change="change">
<uni-collapse-item title="审批流程" title-border="show" :open="true">
<uni-stepinformation :instanceApplyList='instanceApplyList'></uni-stepinformation>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
</template>
<script>
export default {
data() {
return {
instanceApplyList:[],//传给子页面的数组
}
},
methods: {
getWaitingTask(){
this.$ajax.getWaitingTask({
id: this.id
}, (response) => {
if (response.success === true) {
console.log('responseswaiting', response)
this.result = response.result
this.instanceApplyList = response.result.instanceApplyList
// console.log('responseswaiting', this.result)
console.log('this.instanceApplyList',this.instanceApplyList)
}
// this.listType(response)
});
},
}
}
</script>
子页面：
解决方法：将子页面中钩子函数created变成mounted调用type函数方法，这样就可以让父页面的函数先运行获取后端数据，在吧数据传入子页面，子页面获取数据在输出。
<template>
<view class="box">
</view>
</template>
<script>
export default {
props:{
instanceApplyList: Array,
default:() => []
},
data() {
return {
judge:[],
}
},
// created() {
// this.type();
// },
mounted() {
this.type()
},
methods: {
type(){
this.judge=this.instanceApplyList
console.log('this.judge',this.judge)
}
}
}
</script>
运行结果：
