Vue(uniapp)父组件方法和子组件方法执行优先顺序

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

运行结果:

相关推荐
excel20 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel21 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript