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

news2024/10/5 14:15:05

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

运行结果:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux 内存检测工具 kfence 详解(一)

版本基于&#xff1a; Linux-5.10 约定&#xff1a; PAGE_SIZE&#xff1a;4K 内存架构&#xff1a;UMA 系列博文&#xff1a; linux 内存检测工具 kfence 详解(一) linux 内存检测工具 kfence 详解(二) 0. 前言 本文 kfence 之外的代码版本是基于 Linux5.10&#xff0c;…

个人用户免费,亚马逊正式推出 AI 编程服务 CodeWhisperer

IT 之家 4 月 14 日消息&#xff0c;亚马逊于 2022 年 6 月以预览版的形式&#xff0c;推出了 AI 辅助编程服务 CodeWhisperer。亚马逊于今天宣布该服务正式上线&#xff0c;并免费向个人用户开放。 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、…

模板(模板函数+模板类)

模板&#xff08;模板函数模板类&#xff09; 1.模板1.1 模板出现的原因1.2 函数模板模板函数的定义模板函数的使用方法总结 1.2 类模板使用举例 1.模板 1.1 模板出现的原因 为了代码重用;使重用的代码不受数据类型的限制 把数据类型设计为一个参数&#xff0c;即参数化(par…

Python 中的线程

一、说明 关于并行、并发等有不同的概念&#xff0c;本篇讲述基本的并行程序&#xff0c;即多线程在python的实现&#xff0c;线程主要的好处在于&#xff0c;在其它进程处于等待状态时&#xff0c;运行中进程能取得更多的CPU资源。 二、线程的基本例子 线程是存在于进程内并共…

嵌入式C语言||static

1 malloc 函数 2 static局部变量 2.1静态局部变量 # include<stdio.h> void foo() {static int count 0; // 定义静态局部变量count;printf("count %d\n", count); } int main() {foo();foo();foo();return 0;}在上面的例子中&#xff0c;count是一个静态…

windows 设置nginx、redis、jar包开机自启、mysql自动备份

1、--------------设置nginx------------------- cd到nginx 根目录与nginx.exe平齐 1.1下载WinSW.NET4.exe 放入nginx.exe平齐目录命名为nginx-servier.exe 链接: https://pan.baidu.com/s/1obKTinD1Z9BKgMJxZMtk2Q?pwdg47u 提取码: g47u 复制这段内容后打开百度网盘手机App…

encodeURIComponent对url参数进行编码

在开发需求过程中&#xff0c;经常会遇到点击链接进入详情页的情况&#xff0c;一般的做法如下&#xff1a; window.open("/xxx/xxx/xxxDetail?a" item.a &b item.b); 我们也经常需要在详情页中获取url上面的参数进行一些逻辑的处理&#xff0c;一般的做法…

针对element-plus,跳转jump(快速翻页)

待补充 const goToPage () > {const inputElement document.querySelector(.el-pagination .el-input__inner);console.log(inputElement, inputElement); } 打印之后可以看到分页跳转的数字输入框&#xff0c;是有进行处理的&#xff0c;max"102",是我自己的…

读图数据库实战笔记01_初识图

1. 图论 1.1. 起源于莱昂哈德欧拉在1736年发表的一篇关于“哥尼斯堡七桥问题”的论文 1.2. 要解决这个问题&#xff0c;该图需要零个或两个具有奇数连接的节点 1.3. 任何满足这一条件的图都被称为欧拉图 1.4. 如果路径只访问每条边一次&#xff0c;则该图具有欧拉路径 1.5…

SpringBoot使用WebSocket收发实时离线消息

引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> WebScoket配置处理器 import org.springframework.boot.web.servlet.ServletContextI…

uniapp开发app,在ios真机上出现的css样式问题

比如下面的问题&#xff0c;在iphone 13上出现&#xff0c;在iphone xR上正常。 问题一&#xff1a;border:1rpx造成边框显示不全 在iphone13上border边框有一部分不显示&#xff1a; 在iphone xR上显示正常&#xff1a; 解决办法是&#xff1a; 将border边框设置中的1rpx改…

基于51单片机的四种波形信号发生器仿真设计(仿真+程序源码+设计说明书+讲解视频)

本设计 基于51单片机信号发生器仿真设计 &#xff08;仿真程序源码设计说明书讲解视频&#xff09; 仿真原版本&#xff1a;proteus 7.8 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0015 这里写目录标题 基于51单片机信号发生…

c++系列之vector类模拟实现

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; 构造函数 vector() //_begin表示有效成员的开始 //_finish表示有效成员的大小…

prometheus监控kafka

一、前言 关于对kafka的监控&#xff0c;要求高的话可以使用kafka-exorter和jmx-exporter一起收集监控数据&#xff0c;要求不高的情况下可以使用kafka-exporter收集监控数据即可 二、部署 kafka-exporter 部署kafka-exporter&#xff0c;我是在k8s集群中部署的 编辑yaml文件…

基于5G工业CPE打造智慧煤矿无人巡检监测应用

煤炭是我国重要的能源资源&#xff0c;对于煤炭的开采和利用也是我国重要的工业产业部分。得益于5G物联网技术的发展普及&#xff0c;煤矿场景也迎来智能化升级&#xff0c;实现了包括智能采掘、智能调度、无人运输、无人巡检等新型应用&#xff0c;极大提升了煤矿采运产业的效…

爬虫批量下载科研论文(SciHub)

系列文章目录 利用 eutils 实现自动下载序列文件 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、获取文献信息二、下载文献PDF文件参考 前言 大家好✨&#xff0c;这里是bio&#x1f996;。…

PHP函数的定义与最简单后门原理

PHP函数的定义与最简单后门原理 文章目录 PHP函数的定义与最简单后门原理函数的定义函数调用的过程变量的范围局部变量全局变量 可变函数动态函数 PHP 最简单后门原理分析 函数的定义 使用function关键字来定义一个函数定义函数的函数名避开关键字形式参数是传递映射的实际参数…

css实现圆形进度条

能用现成组件就用&#xff0c;实现不行再自己写&#xff0c;因为牵扯到上传文件&#xff0c;进度实时出不来&#xff0c;所以只能使用dom元素操作&#xff1b; 1.实现 效果&#xff1a; 上图是100%&#xff0c;如果需要根据百分比显示&#xff0c;我们需要看下代码里面left和…

高通平台GPIO引脚复用指导

高通平台GPIO引脚复用指导 1. 概述1.1 平台有多少个GPIO&#xff1f;1.2 这些GPIO都有哪些可复用的功能&#xff1f; 2. 软件配置2.1 TZ侧GPIO配置2.2 SBL侧GPIO配置2.3 AP侧GPIO配置2.3.1 Linux DTS机制与设备驱动模型概述2.3.2高通平台的pinctrl控制器2.3.2.1 SDX12 CPU pinc…

axios封装以及详细用法

文章目录 axios用法(这里没有封装&#xff0c;下面有封装好的get&#xff0c;post方法&#xff0c;在axios封装里面)get &#xff0c;delete方法post&#xff0c;put方法 axios具体封装axios 具体参数配置 axios用法(这里没有封装&#xff0c;下面有封装好的get&#xff0c;pos…