props传值问题

父组件和子组件同时展现

同步任务无需添加额外的代码,正常写,而异步任务需要添加下面的解决方案,因为异步任务需要等待响应才能进行赋值。

父组件:

<div><UploadFile ref="child" :data="tableData"></UploadFile>
</div>
created () {this.init();
},
methods: {showdialog () {this.dialogFormVisible = true;},init () {this.$axios({url: `/proxy_version/renew/getList`,method: 'post',data: {pageNo: 1,pageSize: 100},success: (result) => {this.tableData = result.data.list[0];this.tableData.versionType = "1";console.log("this.tableData", this.tableData);}});},
}

通过props父组件在created函数中初始化子组件的数据

子组件:

 props: ['data'],data () {return {formdata: this.data,versionNum: this.data.versionNumber,}},// 或者
created () {this.formdata = this.data;this.versionNum = this.data.versionNumber;console.log("data", this.data);
},

子组件在created中进行接收或者在data中进行更改。
按上面的方法会出现versionNumber等属性undefined,这是因为在父组件调用接口传递数据给子组件时,接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求,在子组件哪个钩子接收数据,都是取不到的。

解决方法:

1.加上一个v-if进行判断

<div><UploadFile ref="child" :data="tableData" v-if="tableData"></UploadFile>
</div>

tableData要设置为null或者undefined,或者v-if更改条件,设置为null或defined,则在赋值时不可以this.tableData.versionType = "1";否则报错。在渲染子组件的时候加上一个条件,当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后,才会执行子组件的created,mounted。最后执行父组件的mounted。

2.使用watch进行监听

watch: {data: {deep: true,handler: function (newVal, oldVal) {this.$nextTick(() => {this.formdata = newValthis.versionNum = newVal.versionNumber;})}}},

在子组件中添加watch监听, 父组件获取到值得时候, 就会触发watch监听, 从而实现重新渲染子组件。

父组件点击之后显示子组件

props:

同步任务:

父组件:

<div><el-button @click="showdialog">点击</el-button><div><el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible"><UploadFile ref="child" :data="tableData"></UploadFile></el-dialog></div></div>
 showdialog () {this.dialogFormVisible = true;this.tableData.versionType = "1";this.tableData.versionNumber = '1.0.0';console.log(this.tableData);},

子组件:

 props: ['data'],data () {return {formdata: this.data,versionNum: this.data.versionNumber,}},//或者
created () {this.formdata = this.data;this.versionNum = this.data.versionNumber;
},

点击事件中为同步代码则没有任何问题,可以显示数据。

异步任务

但如果是异步任务,则无法显示数据,因为异步任务返回结果时,子组件的created和data都已经初始化完成。

解决方案1:

父组件:

<div><el-button @click="showdialog">点击</el-button><div><el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible"><UploadFile ref="child" :data="tableData"></UploadFile></el-dialog></div></div>
showdialog () {this.dialogFormVisible = true;this.$axios({url: `/proxy_version/renew/getList`,method: 'post',data: {pageNo: 1,pageSize: 100},success: (result) => {this.tableData = result.data.list[0];this.tableData.versionType = "1";console.log("this.tableData", this.tableData);}
});

子组件:

props: ['data'],data () {return {formdata: {},versionNum: null,}},watch: {data: {deep: true,handler: function (newVal, oldVal) {this.$nextTick(() => {this.formdata = newValthis.versionNum = newVal.versionNumber;console.log(this.formdata);})}}},

在子组件加入watch函数进行监测。

解决方案2:

父组件:

  <div><el-button @click="showdialog">点击</el-button><div><el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible"><UploadFile ref="child" :data="tableData" v-if="tableData"></UploadFile></el-dialog></div></div>//  父组件点击方法不变,正常写

加上v-if进行判断tableData有没有值,有才渲染子组件

子组件可以在created函数中进行赋值也可以在data中进行赋值。

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

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

相关文章

【C#】当重复使用一段代码倒计时时,使用普通类和静态方法,实现简单的封装性、可扩展性、可维护性

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…

程序员找不到工作原因以及解决办法

程序员找不到工作原因以及解决办法 程序员当前就业环境真的很差&#xff0c;所以找工作跳槽一定要讲究方式方法&#xff0c;接下来我讲一下你找不着工作的原因以及解决办法&#xff0c;大家先点赞收藏&#xff0c;内容敏感我怕你刷不到 沟通200个全是未读那就是你的城市没有招聘…

静态长效代理IP和动态短效代理IP有哪些用途?分别适用场景是什么?

静态长效代理IP和动态短效代理IP是两种常见的代理IP类型&#xff0c;它们在用途和适用场景上存在一定的差异。了解它们的特性以及使用场景有助于我们更好地利用代理IP&#xff0c;提高网络访问的效率和安全性。 一、静态长效代理IP 1. 用途 静态长效代理IP是指长期保持稳定的代…

安全强化学习笔记

这里写自定义目录标题 参考资料环境算法CPO 2017 ICMLPCPO 2019 ICLRFOCOPS 2020 NIPSCRPO 2021 ICMLCUP 2022 NIPS TRPO 如何看懂TRPO里所有的数学推导细节? - 小小何先生的回答 - 知乎 参考资料 Safe Reinforcement Learning 安全/约束强化学习路线图&#xff08;Safe RL…

JVM相关问题及答案(2024)

1、什么是JVM&#xff0c;它是如何工作的&#xff1f; JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;它是一个虚拟机器&#xff0c;用于执行Java字节码。JVM的主要任务是将Java字节码翻译成特定平台的机器码&#xff0c;并在特定平台上运行…

Java的NIO

Java NIO&#xff08;New I/O&#xff0c;新 I/O&#xff09;是 Java 1.4 版本引入的一组用于进行非阻塞 I/O 操作的 API。相比于传统的 Java I/O&#xff08;或称为 IOStream&#xff09;&#xff0c;Java NIO 提供了更为灵活、可扩展和高性能的 I/O 处理方式。 Java NIO 的核…

Python-动态烟花【附完整源码】

烟花代码 运行效果&#xff1a;Python动态烟花代码 import pygame from random import randint from random import uniform from random import choice import math vector pygame.math.Vector2 # 重力变量 gravity vector(0, 0.3) # 控制窗口的大小 DISPLAY_WIDTH DISP…

C#核心--实践小项目(贪吃蛇)

C#核心实践小项目 -- 贪吃蛇 必备知识点--多脚本文件 &#xff08;可观看CSharp核心--52集进行了解&#xff09; 必备知识点--UML类图 必备知识点--七大原则 贪吃蛇 项目展示 控制方向的是&#xff1a;WSAD 确定键是&#xff1a;J 需求分析&#xff08;UML类图&#xff09…

第11章 GUI Page495~496 步骤三十一:另存为别的文件

当前的TrySaveFile(bool hint_on_dirty true)有两个特征无法满足“另存”的需求&#xff1a; 一&#xff0c;TrySaveFile仅在数据为“新”的时候才提问用户输入文件名。而“另存”总是要求用户输入一个文件名&#xff0c;多以它总应该弹出一个文件选择对话框&#xff0c;这也…

【网络安全】【密码学】【北京航空航天大学】实验二、数论基础(中)【C语言和Java实现】

实验二、数论基础&#xff08;中&#xff09; 一、实验内容 1、扩展欧几里得算法&#xff08;Extended Euclid’s Algorithm&#xff09; &#xff08;1&#xff09;、算法原理 已知整数 a , b ,扩展的欧几里得算法可以在求得 a , b 的最大公约数的同时&#xff0c;找到一对…

Python如何连接RabbitMQ并编写简单的生产者和消费者代码?有录播直播和私教视频教程

更简单的获取连接的方式 get_connection方法 这个方法的签名如下&#xff1a; def get_connection(host127.0.0.1,port5672,username"zhangdapeng",password"zhangdapeng520",virtual_host/, ):"""获取RabbitMQ客户端连接对象:param hos…

LeetCode[105] 从前序与中序遍历序列构造二叉树

给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,20,null,null,15,7] …

Linux计划任务管理

之前已经学习了一些Linux的基础知识和关机方式与文件系统简介&#xff0c;今天来学习下Linux下的计划任务&#xff0c;因为这个功能自己搭建服务器还是用得上的&#xff0c;比如定期清理垃圾缓存、定期备份数据库和网站等等。 系统环境&#xff1a;Centos8 一、什么是计划任务 …

c语言中负数的读取

自记&#xff1a; 1.以字节为例&#xff0c;其取值范围是 -128 ~ 127&#xff0c;即-2E7 ~ 2E7-1, 用最高位表示其符号&#xff0c;0表示正数&#xff0c;1表示负数。数值以补码形式存储。正数的补码就是该正数本身&#xff0c;负数的补码需要转化&#xff0c;如下: 1>.对负…

【flink番外篇】13、Broadcast State 模式示例-广播维表(2)

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分&#xff0c;比如术语、架构、编程模型、编程指南、基本的…

自定义Flink SourceFunction定时读取数据库

文章目录 前言一、自定义Flink SourceFunction定时读取数据库二、java代码实现总结 前言 Source 是Flink获取数据输入的地方&#xff0c;可以用StreamExecutionEnvironment.addSource(sourceFunction) 将一个 source 关联到你的程序。Flink 自带了许多预先实现的 source funct…

openssl3.2 - 官方demo学习 - 索引贴

文章目录 openssl3.2 - 官方demo学习 - 索引贴概述笔记工程的搭建和调试环境BIOBIO - client-arg.cBIO - client-conf.cBIO - saccept.cBIO - sconnect.cBIO - server-arg.cBIO - server-cmod.cBIO - server-conf.cBIO - 总结certsciphercipher - aesccm.cEND openssl3.2 - 官方…

使用Java连接MongoDB (6.0.12) 报错

报错&#xff1a; Exception in thread "main" com.mongodb.MongoCommandException: Command failed with error 352: Unsupported OP_QUERY command: create. 上图中“The client driver may require an upgrade”说明了“客户端驱动需要进行升级”&#xff0c;解…

数据分析-Pandas如何转换产生新列

数据分析-Pandas如何转换产生新列 时间序列数据在数据分析建模中很常见&#xff0c;例如天气预报&#xff0c;空气状态监测&#xff0c;股票交易等金融场景。此处选择巴黎、伦敦欧洲城市空气质量监测 N O 2 NO_2 NO2​数据作为样例。 python数据分析-数据表读写到pandas 经典…

What does `rpm -ivh` do?

rpm -ivh 安装 并 显示安装进度 (–install–verbose–hash) rpm -ivh /media/cdrom/RedHat/RPMS/samba-3.0.10-1.4E.i386.rpm 安装rpm -ivh --relocate //opt/gaim gaim-1.3.0-1.fc4.i386.rpm 指定安装到 /opt/gaim[Ref] rpm -uvh和-ivh有什么区别以及zabbix 安…