网页设计实验报告代码东莞网络优化哪家好

涉及到的知识点：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>

运行结果：