vue3父组件控制子组件表单验证及获取子组件数值方法

news/2024/10/30 13:24:48/

1、关键部分的代码如下,我努力交代清楚了,希望能让大家看懂。

<template><KeepAlive><component ref="comp" :is="compNames[steps[compIndex].comp]" /></KeepAlive><el-button @click="prevBtn" v-show="compIndex">上一步</el-button><el-button type="primary" @click="nextBtn">{{compIndex ? '提交': '下一步'}}</el-button>
</template><script setup lang="ts">
//引入两个子组件
import onefrom './onefrom.vue'
import twoForm from './twoForm.vue'//子组件切换相关参数
const steps = [{title:'111',comp:'one',ref:'oneForm'},{title:'222',comp:'two',ref:'twoForm'}]
//当前组件索引
const compIndex = ref(0)//子组件名
type compName = {[key:string]:any
}
const compNames = shallowReactive<compName>({oneForm,twoForm})//组件设置ref="comp"
const comp = ref(null);  //点击按钮验证子组件表单
const prevBtn = () => {compIndex.value=0
}
const nextBtn = () => {if (compIndex.value == 0 && comp.value.$refs.formRef) {comp.value.$refs.formRef.validate((valid) => {if (valid) {compIndex.value = 1  //表单验证通过后切换到子组件twoForm}});}
}

2、顺便记录下父组件获取子组件数值的写法,和获取当前日期的函数。

子组件代码

<template><el-form-item label="创建时间"><el-date-pickerv-model="currentDate"type="date"/></el-form-item>
</template><script setup lang="ts">
//获取当前日期
let currentDate = computed<string>(() => {let currentDate = new Date();let year = currentDate.getFullYear();let month = currentDate.getMonth() + 1;let day = currentDate.getDate();return year + '-' + month + '-' + day;
});// 表单参数
const initFormData = reactive<formulaForm>({id: null,name: undefined,createTime: currentDate.value
})//将表单参数暴露给父组件
defineExpose({initFormData
})
</script>

父组件接收参数

</template><component ref="comp" :is="compNames[steps[compIndex].comp]" /><el-button @click="Btn">获取参数</el-button>
</template><script setup lang="ts">
const Btn = () => {console.log(comp.value.initFormData)
}
</script>

http://www.ppmy.cn/news/1543111.html

相关文章

流媒体协议.之(RTP,RTCP,RTSP,RTMP,HTTP)(三)

本文&#xff0c;分析&#xff0c;贴出一些博主的关键源码 git地址&#xff1a;https://github.com/ireader/media-server?tabreadme-ov-file 网络上也有开源的库&#xff0c;可以用这些。 推流协议库有&#xff0c;librtmp&#xff0c;librtp&#xff0c;jrtplib等&#xf…

Logo内容移除、盒子阴影、精灵图、滑动门

Logo内容移除 像小米&#xff0c;百度&#xff0c;京东&#xff0c;淘宝都有自己的Logo(网页的标志), 1.将a标签的背景background作为logo使用&#xff0c;所以点击图片也可以跳转。 2. 可以在logo中设置文字&#xff0c;但是要将文字移除给用户更好的体验。 3. &#xff08;…

矩阵压缩格式转换:COO转换CSC(C++)

目录 一、基本理论 1.1 COO格式 1.2 CSR格式 1.3 CSC格式 二、代码实现 三、测试 一、基本理论 稀疏矩阵&#xff08;Sparse Matrix&#xff09;是大部分元素为零的矩阵&#xff0c;与之相对应的是稠密矩阵&#xff08;Dense Matrix&#xff09;。科学领域、工程计算、图…

2024年10月29日Github流行趋势

项目名称&#xff1a;Amphion 项目维护者&#xff1a;lmxue HeCheng0625 yuantuo666 RMSnow HarryHe11 项目介绍&#xff1a;Amphion是一个用于音频、音乐和语音生成的工具包。它旨在支持可重复的研究&#xff0c;并帮助初学者在音频、音乐和语音生成研究与开发领域起步。 项目…

React-query vs. 神秘新工具:前端开发的新较量

流畅的分页体验&#xff1a;AlovaJS的分页请求策略 在现代web应用中&#xff0c;分页是一个常见的功能需求。无论是浏览商品列表、查看文章集合&#xff0c;还是管理后台的数据表格&#xff0c;用户都需要一种高效且流畅的方式来浏览大量数据。然而&#xff0c;实现一个流畅且…

点云处理中的多项式重构、平滑与法线估计

在三维点云数据处理中&#xff0c;为了使数据更接近真实物体的形状并减少噪声&#xff0c;常用一些重建和优化的技术&#xff0c;如多项式重构、平滑处理和法线估计。点云数据作为物体表面的离散表示&#xff0c;通常会因采集设备或环境的干扰带有噪声和不规则性。通过这些方法…

水经微图IOS版5.6.0发布,新增照片轨迹生成功能

随时随地&#xff0c;微图一下&#xff01; 水经微图&#xff08;以下称“微图”&#xff09;IOS版5.6.0发布&#xff0c;本次升级主要新增了照片附件的添加查看功能&#xff0c;以及上线吉林一号2023版本全国一张图。 当前版本 当前版本号为&#xff1a;5.6.0 如果你发现该…

【优先算法】双指针

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;优先算法 个人主页&#xff1a;Celias blog~ 目录 ​​​​​​移动零 复写零 快乐数 盛水最多的容器 …