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

涉及到的知识点: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.result
						this.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.instanceApplyList
				console.log('this.judge',this.judge) 
				
			}
		}
	}
</script>

运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/106166.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

引入个性化标签的协同过滤推荐算法研究_邢瑜航

第3章 引入个性化标签的I-CF推荐算法 3.2.2 相似性度量方法 3.2.3 改进后的算法步骤与流程

Python:一个函数可以被多个装饰器装饰

理解&#xff1a; 规律&#xff1a; 一个函数可以被多个装饰器装饰. wrapper1 wrapper2 def target():print(我是目标)规则和规律 wrapper1 wrapper2 TARGET wrapper2 wrapper1def wrapper1(fn): # fn: wrapper2.innerdef inner(*args, **kwargs):print("这里是wrapper1 …

【RabbitMQ 实战】12 镜像队列

一、镜像队列的概念 RabbitMQ的镜像队列是将消息副本存储在一组节点上&#xff0c;以提高可用性和可靠性。镜像队列将队列中的消息复制到一个或多个其他节点上&#xff0c;并使这些节点上的队列保持同步。当一个节点失败时&#xff0c;其他节点上的队列不受影响&#xff0c;因…

【网络协议】聊聊TCP的三挥四握

上一篇我们说了网络其实是不稳定的&#xff0c;TCP和UDP其实是两个不同的对立者&#xff0c;所以TCP为了保证数据在网络中传输的可靠性&#xff0c;从丢包、乱序、重传、拥塞等场景有自己的一套打法。 TCP格式 源端口和目标端口是不可缺少的&#xff0c;用以区分到达发送给拿…

【每日一题】掷骰子等于目标和的方法数

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;动态规划 写在最后 Tag 【动态规划】【数组】 题目来源 1155. 掷骰子等于目标和的方法数 题目解读 你手里有 n 个一样的骰子&#xff0c;每个骰子都有 k 个面&#xff0c;分别标号 1 到 n。给定三个整数 n&#xff0…

java异常处理

异常处理分为三类&#xff1a; 检查性异常 用户错误或问题引起的异常&#xff0c;这是程序员无法预见的。例如要打开一个不存在文件时&#xff0c;一个异常就发生了&#xff0c;这些异常在编译时不能被简单地忽略。 运行时异常 运行时异常是可能被程序员避免的异常&#xf…

2023深耕kotlin,谈谈前景

为什么学习kotlin&#xff1f; Kotlin 早就已经是 Google 官方推荐的开发语言了&#xff0c;而且 Android 新的 Compose 框架只支持 Kotlin &#xff0c;在 Google 那里&#xff0c;Android开发中 Java 其实已经被淘汰了。Java 和 Kotlin 虽然都属于高级语言&#xff0c;但是 …

LeetCode--2.两数相加

文章目录 1 题目描述2 解题思路2.1 代码实现 1 题目描述 给你两个 非空 的链表, 表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的, 并且每个节点只能存储 一位 数字 请你将两个数相加, 并以相同形式返回一个表示和的链表 你可以假设除了数字 0 之外, 这两个数都…

redis archive github

https://github.com/redis/redis/releases/tag/7.2.2https://github.com/redis/redis/releases/tag/7.2.2

虹科分享 | 买车无忧?AR带来全新体验!

文章来源&#xff1a;虹科数字化与AR 阅读原文&#xff1a;https://mp.weixin.qq.com/s/XsUFCTsiI4bkEMBHcGUT7w 新能源汽车的蓬勃发展&#xff0c;推动着汽车行业加速进行数字化变革。据数据显示&#xff0c;全球新能源汽车销售额持续上升&#xff0c;预计到2025年&#xff0…

VTK OrientationMarker 方向 三维坐标系 相机坐标轴 自定义坐标轴

本文 以 Python 语言开发 我们在做三维软件开发时&#xff0c;经常会用到相机坐标轴&#xff0c;来指示当前空间位置&#xff1b; 坐标轴效果&#xff1a; 相机方向坐标轴 Cube 正方体坐标轴 自定义坐标轴&#xff1a; Code&#xff1a; Axes def main():colors vtkNamedC…

Git总结

Git介绍 一、Git常用命令 添加、提交 git add 将文件从工作区添加到暂存区&#xff0c;表示git开始追踪文件&#xff0c;如果不想让git追踪了&#xff0c;可以使用 git rm --cached <file> 取消文件追踪&#xff0c;仅仅只代表追踪取消&#xff0c;工作区文件还是照…

折磨的Ts

先看下官网 这里的withDefault是给props设置默认值的 由于props传入了个函数在设置默认值的时候不知道怎么设置了 解决办法&#xff1a;直接不设置了。也不写了。

简单了解一下:NodeJS的WebSocket网络编程

NodeJS的webSocket网络编程。 那什么是WebSocket呢&#xff1f;WebSocket是HTML5提供的一种浏览器和服务器进行通信的网络技术。两者之间&#xff0c;只需要做一个握手动作&#xff0c;就可以在浏览器和服务器之间开启一条通道&#xff0c;就可以进行数据相互传输。 实现WebS…

行情分析——加密货币市场大盘走势(10.27)

目前大饼开始了震荡盘整&#xff0c;目前远离EMA21均线&#xff0c;预计会有大的回调动作。而MACD日线来看&#xff0c;昨日和今日开始呈现绿色空心柱&#xff0c;也在说明大饼在做震荡盘整。不排除大跌的可能性&#xff0c;大饼可以开始布局中长线空单&#xff0c;可以再35000…

死锁Deadlock

定义 死锁是指两个或多个线程互相持有对方所需的资源&#xff0c;从而导致它们无法继续执行的情况。如下图所示&#xff0c;现有两个线程&#xff0c;分别是线程A及线程B&#xff0c;线程A持有锁A&#xff0c;线程B持有锁B。此时线程A想获取锁B&#xff0c;但锁B需等到线程B的结…

设计模式之桥梁模式

什么是桥梁模式 桥梁模式&#xff08;Bridge Pattern&#xff09;也称为桥接模式&#xff0c;属于结构型模式&#xff0c;它主要目的是通过组合的方式建立两个类之间的联系&#xff0c;而不是继承。桥梁模式将抽象部分与它的具体实现部分分离&#xff0c;使它们都可以独立地变…

Dockerfile文件自动化生成R4L镜像

Dockerfile文件自动化生成R4L镜像的步骤 1、安装Docker&#xff1a;2、使用Dockerfile一键生成镜像&#xff1a;3、查看生成的Docker镜像&#xff1a;4、删除Docker镜像&#xff1a;5、生成Docker容器&#xff1a;6、查看容器7、删除容器 1、安装Docker&#xff1a; curl -fsS…

C语言之预处理

目录 前言 宏定义define的用法 文件包含include的用法 条件编译的用法 其他预处理命令 练习题 练习一 练习二 练习三 前言 预处理命令可以改变程序设计环境&#xff0c;提高编程效率&#xff0c;它们并不是C语言本身的组成部分&#xff0c;不能直接对它们进行编译&am…

京东(天猫)数据分析:2023下半年茶饮料市场高速增长,东方树叶一骑绝尘

当前在食品饮料行业中&#xff0c;整体的增长放缓&#xff0c;且各个细分品类上都已经充分竞争。但茶饮料市场例外&#xff0c;近两年呈现高增长的态势&#xff0c;一来取决于行业头部企业也在积极推动茶饮料不断升级&#xff0c;另外是主打更健康、更时尚的茶饮料深受年轻消费…