如何实现vue动态绑定组件子父组件多表单验证
这次给大家带来如何实现vue动态绑定组件子父组件多表单验证,实现vue动态绑定组件子父组件多表单验证的注意事项有哪些,下面就是实战案例,一起来看一下。
前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护。
Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。
如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载。
动态加载子组件:component
// 给下拉框绑定下拉列表的索引 <el-select v-model="value" placeholder="请选择" style="float:left" @change="selectNum(value)"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
引入组件后放到一个数组内,通过控制对应的索引达到加载组件的目的
// 加载组件:每次下拉框监听则给changValue新赋值,如果下拉options的value从0开始则绑定组件时不用-1 <component :is="componentName[changValue - 1]" ref="subjectChild" @isSubmit="getSubmit"></component>
子父组件表单一起验证:
按钮放在父组件内:
子组件:自定义验证规则
data(){ const num = (rule, value, callback) => { let num = /^\d+$/ if(!value){ return callback(new Error('数量不能为空')) }else if(!num.test(value)){ return callback(new Error('数量必须为数字')) }else{ callback() } } const price = (rule, value, callback) => { let num2 = /^\d+$/ if(!value){ return callback(new Error('单价不能为空')) }else if(!num2.test(value)){ return callback(new Error('单价必须为数字')) }else{ callback() } } return{ // 验证 apple:{ num: '', price: '', }, reg:{ num: [ { validator: num, trigger: 'blur' } ], price: [ { validator: price, trigger: 'blur' } ] } } // 验证 submitForm(){ this.$refs.apple.validate((valid) => { if(valid){ this.$emit('isSubmit',["subject",true]) }else{ this.$emit('isSubmit',["subject",false]) return false } }) }
父组件:
// 获取子组件状态 getSubmit(type){ this.isRule = type[1] }, // 公共数据验证 submitForm2(){ // 如果选中了子组件 if(this.changValue){ this.$refs.subjectChild.submitForm() } let _this = this let p1 = new Promise((resolve, reject) => { _this.$refs.ruleForm.validate((valid) => { if(valid){ resolve() } }) }) if(_this.isRule){ Promise.all([p1]).then(() => { console.log('正确') }) .catch(() => { console.log('错误') }) }else{ console.log('错误') } },
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是如何实现vue动态绑定组件子父组件多表单验证的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

两个微信不可以绑定同一张银行卡。绑定银行卡到微信账户操作:1、打开微信应用程序,点击“我”选项,然后选择“支付”选项;2、选择“添加银行卡”选项,并按照系统提示输入银行卡信息;3、一旦银行卡绑定成功,用户就可以在微信中使用该银行卡进行支付和转账。

在创建虚拟机时,系统会要求您选择磁盘类型,您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘,后来意识到需要动态磁盘,或者相反,该怎么办?好!你可以把一种转换成另一种。在这篇文章中,我们将看到如何将VirtualBox固定磁盘转换为动态磁盘,反之亦然。动态磁盘是一种虚拟硬盘,它最初具有较小的大小,随着您在虚拟机中存储数据,其大小会相应增长。动态磁盘在节省存储空间方面非常高效,因为它们只占用所需的主机存储空间。然而,随着磁盘容量的扩展,可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

如果要在Windows11中将动态磁盘转换为基本磁盘,则应首先创建备份,因为该过程将擦除其中的所有数据。为什么要在Windows11中将动态磁盘转换为基本磁盘?根据Microsoft,动态磁盘已从Windows中弃用,不再推荐使用。此外,Windows家庭版不支持动态磁盘,因此您将无法访问这些逻辑驱动器。如果要将更多磁盘合并到更大的卷中,建议使用基本磁盘或存储空间。在本文中,我们将向您展示如何在Windows11上将动态磁盘转换为基本磁盘如何在Windows11中将动态磁盘转换为基本磁盘?在开始

在许多Web应用程序中,表格是必不可少的一个组件。表格通常具有大量数据,因此表格需要一些特定的功能来提高用户体验。其中一个重要的功能是可编辑性。在本文中,我们将探讨如何使用Vue.js实现可编辑的表格,并提供具体的代码示例。步骤1:准备数据首先,我们需要为表格准备数据。我们可以使用JSON对象来存储表格的数据,并将其存储在Vue实例的data属性中。在本例中

不少用户在玩win10的的一些游戏的时候总是会遇到一些问题,比如说卡屏和花屏等等情况,这个时候我们是可以采用打开directplay这个功能来解决的,而且功能的操作方法也很简单。win10旧版组件directplay怎么安装1、在搜索框里面输入“控制面板”然后打开2、查看方式选择大图标3、找到“程序和功能”4、点击左侧的启用或关闭win功能5、选择旧版这里的勾选上就可以了

MetaMask(中文也叫小狐狸钱包)是一款免费的、广受好评的加密钱包软件。目前,BTCC已支持绑定MetaMask钱包,绑定后可使用MetaMask钱包进行快速登入,储值、买币等,且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中,我们将详细介绍如何注册和使用MetaMask,以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么?MetaMask小狐狸钱包拥有超过3,000万用户,是当今最受欢迎的加密货币钱包之一。它可免费使用,可作为扩充功能安装在网络

在如今这个信息爆炸的时代,个人品牌和企业形象的建设变得越来越重要。小红书作为国内领先的时尚生活分享平台,吸引了大量用户关注和参与。对于那些希望扩大影响力、提高内容传播效率的用户来说,绑定子账号成为了一种有效的手段。那么,小红书怎么绑定子账号呢?又如何检测账号是否正常呢?本文将为您详细解答这些问题。一、小红书怎么绑定子账号?1.登录主账号:首先,您需要登录您的小红书主账号。2.打开设置菜单:点击右上角的“我”,然后选择“设置”。3.进入账号管理:在设置菜单中,找到“账号管理”或“账号助手”选项,点

1、打开今日头条。2、点击右下角我的。3、点击【系统设置】。4、点击【账号和隐私设置】。5、点击【抖音】右边的按钮即可绑定抖音。
