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.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>

运行结果:

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot整合Spring Fox生成Swagger文档

Spring Fox简介 Springfox是一个用于在Spring应用程序中生成Swagger文档的开源库。它提供了一组注解和工具&#xff0c;可以将你的API代码和文档整合在一起&#xff0c;方便生成和展示API的Swagger文档。 使用Springfox&#xff0c;你可以在Spring Boot项目中集成Swagger&…

Go学习第十二章——Go反射与TCP编程

Go反射与TCP编程 1 反射1.1 基本介绍1.2 快速入门1.3 注意事项和细节说明1.4 最佳实践 2 Tcp Socket编程2.1 基本介绍2.2 入门案例2.3 服务器监听2.4 服务器接受客户端消息 1 反射 1.1 基本介绍 **反射&#xff1a;**在编译时静态类型语言中实现动态特性的一种机制。 Go语言…

Qt 窗口的尺寸

本文通过多个案例&#xff0c;详细说明关于Qt窗体尺寸的一些重要问题 默认尺寸 对于一个Qt的窗口&#xff08;继承于QWidget&#xff09;&#xff0c;获取其窗体尺寸的方法size()&#xff1b; 以一个Qt创建Qt Widgets Application项目的默认生成代码为基础&#xff0c;做如下…

HugeGraph Hubble 配置 https 协议的操作步骤

背景 HugeGraph 图数据库的 Server 端支持 https 配置&#xff0c;官方文档中有说明相对比较容易&#xff0c;而 Hubble 部署过程都是 http的。 我们有一个应用要嵌入 hubble 页面&#xff0c;而且部署为 https &#xff0c;那么 Hubble 是否支持配置 https 呢&#xff1f;网…

Docusaurus 搭建站点不完全指南

介绍 它是什么&#xff1f; Docusaurus 是一个基于 React 构建的帮助快速生成静态网站的工具&#xff0c;支持将 MDX 格式编写的文档生成静态 HTML 文件&#xff0c;同时还支持在 Markdown 中嵌入 React 组件。 什么情况下你能用到它&#xff1f; 使用 markdown 语法书写静态博…

Leetcode—80.删除有序数组中的重复项II【中等】

2023每日刷题&#xff08;十&#xff09; Leetcode—80.删除有序数组中的重复项II 双指针实现代码 int removeDuplicates(int* nums, int numsSize){int i 0;int j 1;int k 1;int tmp nums[i];while(j < numsSize) {if(nums[j] tmp && k < 2) {nums[i] n…

【Java】电子病历编辑器源码(云端SaaS服务)

电子病历编辑器极具灵活性&#xff0c;它既可嵌入到医院HIS系统中&#xff0c;作为内置编辑工具供多个模块使用&#xff0c;也可以独立拿出来&#xff0c;与第三方业务厂商展开合作&#xff0c;为他们提供病历书写功能&#xff0c;充分发挥编辑器的功能。 电子病历基于云端SaaS…

【Note详细图解】中缀表达式如何转为后缀表达式?数据结构

中缀表达式 中缀表达式&#xff08;中缀记法&#xff09;是一个通用的算术或逻辑公式表示方法&#xff0c;操作符是以中缀形式处于操作数的中间&#xff08;例&#xff1a;3 4&#xff09;&#xff0c;中缀表达式是人们常用的算术表示方法。 前缀或后缀记法不同的是&#xf…

CentOS 编译安装TinyXml2

安装 TinyXml2 Git 源码下载地址:https://github.com/leethomason/tinyxml2 步骤1&#xff1a;首先&#xff0c;你需要下载tinyxml2的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2&#xff1a;下载完成后&#xff0c;需要将源代码解…

Spring Boot中RedisTemplate的使用

当前Spring Boot的版本为2.7.6&#xff0c;在使用RedisTemplate之前我们需要在pom.xml中引入下述依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><vers…

nginx浏览器缓存和上流缓存expires指令_nginx配置HTTPS

1.nginx控制浏览器缓存是针对于静态资源[js,css,图片等] 1.1 expires指令 location /static {alias/home/imooc;#设置浏览器缓存10s过期expires 10s;#设置浏览器缓存时间晚上22:30分过期expires @22h30m;#设置浏览器缓存1小时候过期expires -1h;#设置浏览器不缓存expires …

windows 离线安装 vue 环境

由于公司要求在内网开发项目&#xff0c;而内网不能连接外网&#xff0c;因此只能离线安装 vue 环境&#xff0c;在网上找过很多的离线安装方法&#xff0c;但都没有成功&#xff0c;于是在不断的尝试中找到了以下方法。 1、找一台与内网电脑相同系统的有网电脑。 2、在有网的电…

【OpenCV实现图像的几何变换】

文章目录 概要&#xff1a;OpenCV实现图像的几何变换、图像阈值和平滑图像变换小结 概要&#xff1a;OpenCV实现图像的几何变换、图像阈值和平滑图像 使用OpenCV库进行图像处理的三个重要主题&#xff1a;几何变换、图像阈值处理以及图像平滑。在几何变换部分&#xff0c;详细…

uniapp vue2、vue3 页面模板代码块设置

本文分享 uniapp vue2、vue3 页面模板代码块设置 设置路径 HBuilder X -> 工具 -> 代码块设置 -> vue代码块 -> 自定义代码块 如上图操作后在打开的 vue.json 文件的右侧“自定义代码块”中复制如下代码&#xff08;可全选替换也可添加到代码中&#xff09; 示…

vue+iView 动态侧边栏菜单保持高亮选中

iview 组件在使用过程中&#xff0c;多多少少有一些小坑&#xff0c;本文简单罗列一二&#xff1a; 避坑指南&#xff1a; 关于iview 侧边栏菜单未能展开高亮选中回显问题 应用场景&#xff1a;iview-admin下接入动态菜单后&#xff0c;刷新或链接跳入时回显失效 简单就是两个方…

Jenkins 重新定义 pom 内容,打包

文章目录 源码管理构建 源码管理 添加仓库地址&#xff0c;拉取凭证&#xff0c;选择需要的分支 构建 勾选 构建环境 下删除原始 build 配置&#xff0c;防止文件错误 Pre Steps 构建前处理 pom.xml &#xff0c;例如我是需要删除该模块的所有子模块配置&#xff0c;我这里…

【计算机毕设小程序案例】基于SpringBoot的小演员招募小程序

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 &#x1f449;IT源码社-SpringBoot优质案例推荐&#x1f448; &#x1f449;IT源码社-小程序优质案例…

java-- 静态数组

1.静态初始化数组 定义数组的时候直接给数组赋值。 2.静态初始化数组的格式&#xff1a; 注意&#xff1a; 1."数据类型[] 数组名"也可以写成"数据类型 数组名[]"。 2.什么类型的数组只能存放什么类型的数据 3.数组在计算机中的基本原理 当计算机遇到…

Redis 配置文件(redis.conf)中文注释及说明

文章目录 一、概述二、觉见基础配置1.1 导入另一个配置文件1.2 添加Redis扩展1.3 绑定Redis服务在那些网卡上&#xff0c;也就是远程可以通过那个的IP地址访问。1.2 指定Redis服务监听端口1.2 最大分配内容大小1.2 后台服务方式运行1.2 日志记录文件1.2 添加扩展 三、完整配置文…

【EI会议征稿】 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)

2024年遥感、测绘与图像处理国际学术会议(RSMIP2024) 2024 International Conference on Remote Sensing, Mapping and Image Processing 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)将于2024年1月19日-21日在中国厦门举行。会议主要围绕遥感、测绘与图像处理等研究领…