Vue（uniapp）父组件方法和子组件方法执行优先顺序

荀鼠不是2023-10-27 9:19

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

运行结果：