Vue3+element-plus项目开发小结(validate)

本文总结了在Vue3项目中使用Element-Plus进行表单验证的经验,强调了父子组件间的交互。通过设置ref实例确保子组件非空,并在父组件的dialog弹窗中嵌套子组件表单。表单校验规则通过`:rules`绑定,并需注册`FormRules`和`FormInstance`。自定义校验可通过`validator`实现。错误示例中,由于误用`v-model`代替`:model`,导致父子组件双向数据绑定失效。正确理解v-model和:model的区别对于父子组件嵌套至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 表单校验的绑定(父子组件嵌套)

 这里的ref实例对象是确保子组件ref="metaTagForm"不能为空值设立的。

父组件为dialog弹窗

 子组件是嵌套其中的form表单

vue3的表单校验和vue2的大差不差,

首先 :rules="rules" 为表单绑定规则,然后rules声明之后为标注了prop类型的formitem进行配对设置校验

这里需要注意的是vue3需要额外注册 FormRules,FormInstance

一个是为了使用ele的校验功能,一个则是将 form的校验绑定到该form的ref实例对象上,方便父组件获取。

如若需要自定义校验,和vue2一样使用 validator: validateType,

ps:图中还有显示<MetaTag>是因为搭配了TS type,里面对数据进行了规定类型操作。

其实按照图上的流程走是表单校验没有问题的!

但是问题出在笔者一开始犯了一个小错误,将子组件的 :model写成了v-model,这样就会导致父子组件无法双向数据绑定。

v-model是用于实现表单元素与Vue实例中数据的双向绑定,而:model是用于将Vue实例中的数据属性绑定到HTML元素的某个属性上。

可以换句话描述就是v-model等于线对面,而:model等于点对线。涉及到父子组件嵌套,不能全都使用v-model!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值