涉及到的知识点:watch监控:先看问题,父组件从后端通过$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.resultthis.instanceApplyList = response.result.instanceApplyList// console.log('responseswaiting', this.result)console.log('this.instanceApplyList',this.instanceApplyList)}// this.listType(response)});},}}
</script>
子页面:
解决方法:将子页面中钩子函数created变成watch监听当父页面获取到后端数据时再调用type函数方法,这样就可以让父页面的函数先运行获取后端数据,在吧数据传入子页面,子页面获取数据在输出。
<template><view class="box"></view>
</template><script>export default {props:{instanceApplyList: Array,default:() => []},data() {return {judge:[],}},// created() {// this.type();// },watch:{instanceApplyList:{deep:true,handler(e){if(e.length>0){this.type()}}}},methods: {type(){this.judge=this.instanceApplyListconsole.log('this.judge',this.judge) }}}
</script>
运行结果: