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.hqwc.cn/news/150749.html

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

相关文章

Spring Cloud之微服务

目录 微服务 微服务架构 微服务架构与单体架构 特点 框架 总结 SpringCloud 常用组件 与SpringBoot关系 版本 微服务 微服务&#xff1a;从字面上理解即&#xff1a;微小的服务&#xff1b; 微小&#xff1a;微服务体积小&#xff0c;复杂度低&#xff0c;一个微服…

Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战

目录 前言无图无真相创建数据库授权服务器maven 依赖application.yml授权服务器配置AuthorizationServierConfigDefaultSecutiryConfig 密码模式扩展PasswordAuthenticationTokenPasswordAuthenticationConverterPasswordAuthenticationProvider JWT 自定义字段自定义认证响应认…

大数据-Storm流式框架(二)--wordcount案例

一、编写wordcount案例 1、新建java项目 2、添加storm的jar包 storm软件包中lib目录下的所有jar包 3、编写java类 WordCountTopology.java package com.bjsxt.storm.wc;import backtype.storm.Config; import backtype.storm.LocalCluster; import backtype.storm.genera…

【Jenkins 安装】

一&#xff1a;安装文件夹准备 在/home/admin 界面下新建三个文件夹&#xff0c;用来安装tomcat、maven 1.打开&#xff0c;/home/admin目录 cd /home/admin 2.新建三个文件夹 mkdir tomcat mkdir maven 二&#xff1a;安装tomcat 1.打开tomcat目录进行tomcat的安装 访问:h…

时间、空间复杂度的例题详解

文章前言 上篇文章带大家认识了数据结构和算法的含义&#xff0c;以及理解了时间、空间复杂度&#xff0c;那么接下来来深入理解一下时间、空间复杂度。 时间复杂度实例 实例1 // 计算Func2的时间复杂度&#xff1f; void Func2(int N) {int count 0;for (int k 0; k <…

3DCAT+东风日产:共建线上个性化订车实时云渲染方案

近年来&#xff0c;随着5G网络和云计算技术的不断发展&#xff0c;交互式3D实时云看车正在成为一种新的看车方式。 与传统的到4S店实地考察不同&#xff0c;消费者可以足不出户&#xff0c;通过网络与终端设备即可实现全方位展示、自选汽车配色、模拟效果、快捷选车并进行个性…

【软考系统架构设计师】2023年系统架构师冲刺模拟习题之《软件工程》

在软考中软件工程模块主要包含以下考点&#xff1a; 文章目录 软件过程模型&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;逆向工程&#x1f31f;基于构件的软件工程&#x1f31f;&#x1f31f;软件开发与软件设计与维护净室软件工程软件模型软件需求 软件过程模型&am…

计算机网络文章荟萃

脑残式网络编程入门(二)&#xff1a;我们在读写Socket时&#xff0c;究竟在读写什么&#xff1f;-网络编程/专项技术区 - 即时通讯开发者社区! 1.什么是 socket - 掘金2.socket 的实现原理 - 掘金本文讲述了 socket 在 linux 操作系统下的数据结构&#xff0c;以及阻塞 IO 利用…

RK3568-pcie接口

pcie接口与sata接口 pcie总线pcie总线pcie控制器sata控制器nvme设备sata设备nvme协议ahci协议m-key接口b-key接口RC模式和EP模式 RC和EP分别对应主模式和从模式,普通的PCI RC主模式可以用于连接PCI-E以太网芯片或PCI-E的硬盘等外设。 RC模式使用外设一般都有LINUX驱动程序,安…

RDMA概览

RDMA(Remote Direct Memory Access&#xff0c;远程直接内存访问)&#xff0c;指能够访问(读写)远程机器的内存。有多种支持RDMA的网络协议&#xff0c;包括&#xff1a;Infiniband、RoCE和iWAPP。具体的API定义包含在内核文件linux/include/rdma/ib_verbs.h reference: 【精选…

Elasticsearch聚合----aggregations的简单使用

文章目录 Getting started1、搜索 address 中包含 mill 的所有人的年龄分布以及平均年龄&#xff0c;但不显示这些人的详情2、size0不展示命中记录&#xff0c;只展示聚合结果3、按照年龄聚合&#xff0c;并且请求这些年龄段的这些人的平均薪资4、查出所有年龄分布&#xff0c;…

关于前端如何下载后端接口返回content-type为application/octet-stream的文件

关于前端如何下载后端接口返回response-type为application/octet-stream的文件 问题描述 后端接口定义为直接返回一个文件&#xff0c;如果带认证信息可以直接通过浏览器url下载&#xff0c;但是接口需要传headers认证信息&#xff0c;url上又不支持传相关信息 解决 前端…