vue3父组件提交校验多个子组件

实现功能:在父组件提交事件中校验多个子组件中的form

父组件:


子组件一:

这个是表格可以增删改的情况,对表格添加输入校验


子组件二:

这个是普通的form表单情况


  
  
  

注意:

1、子组件中的form要添加ref属性,并使用defineExpose暴露出去,这样父组件才能获取到子组件中的ref,才能进行校验

2、当对表格输入内容做校验时prop和v-model绑定的是同一个才能校验通过

3、当发现校验一直不通过时可以查看控制台打印的的结果,看哪个校验没通过

校验不通过

vue3父组件提交校验多个子组件_第1张图片 

vue3父组件提交校验多个子组件_第2张图片 

你可能感兴趣的:(javascript,前端,vue.js)