子组件代码

// 子组件
validateForm() {
return new Promise((resolve, reject) => {
this.$refs.contractBaseRef.validate((valid) => {
if (valid) {
resolve(this.getFormData())
} else {
this.$message.error('请完成必填项输入!')
resolve(false)
}
})
})

子组件代码

// 父组件
<template>
<contract-base-edit ref="outBaseInfoRef" />
</template>
<script>
// methods
this.$refs['outBaseInfoRef'].validateForm().then(res => {
console.info('res out', res)
})
</script>

Vue 父子组件表单同步校验的更多相关文章

  1. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  2. vue中form 表单常用校验封装(async-validator)

    新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...

  3. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  4. vue父子组件状态同步的最佳方式续章(v-model篇)

    大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...

  5. vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  6. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  7. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  8. elementui 多组件表单验证

      最近在做管理后台,vue2.0基于elementui框架进行开发. elementui的api中表单验证都是单个vue文件的验证.而我的保存按钮放在了父组件了,验证对象为三个子组件我的灵机一动 想 ...

  9. 【Vue】强化表单的9个Vue输入库

    一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...

随机推荐

  1. 同一台机器oralce11g和12c公用一个监听器监听多个端口

    启动数据库服务 (这里还没有启动监听器) 如上图OracleServiceORCL为11g的服务,服务名为orcl,OracleServiceWX为12c的服务名,服务名为wx,两个服务均已正常启动, ...

  2. 不知道Linux内核到底长啥样?这幅漫画让你秒懂!

    下面给大家分享一个[超全2020Linux学习教程],点击链接免费领取哦~ https://www.magedu.com/?p=84301&preview=true

  3. C++语法小记---智能指针

    智能指针 用于缓解内存泄露的问题 用于替代原生指针 军规:只能指向堆空间中的对象或变量 方法 在智能指针的析构函数中调用delete 重载"->"操作符,只能重载成成员函数, ...

  4. INSERT插入WHERE判断是否插入(MySQL)

    一.INSERT INTO IF EXISTS 具体语法:INSERT INTO table(field1, field2, fieldn) SELECT 'field1', 'field2', 'f ...

  5. vue+axios+springboot文件下载

    //前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...

  6. 安装nginx1.10和状态模块

    环境 操作系统: Centos7.2 内核: 3.10.0-327.el7.x86_64 nginx: nginx-1.10.0.tar.gz 安装: 1.安装依赖包 yum -y install g ...

  7. Android系统前台进程,可见进程,服务进程,后台进程,空进程的优先级排序

    1.前台进程 前台进程是Android中最重要的进程,在最后被销毁,是目前正在屏幕上显示的进程和一些系统进程,也就是和用户正在交互的进程. 2.可见进程 可见进程指部分程序界面能够被用户看见,却不在前 ...

  8. leetcode 5473

    这个题真是当时想麻烦了,,,感谢LLdl 提供的题解 其实一个很重要的点就是,如果后面的玩意翻转了偶数次,那就跟没变一样.如果是奇数次就取反. 怪我天真,第一反应就去位运算去了,,,,哪有那么复杂诶 ...

  9. sublime text 配置文件

    不慌. 上网上下的clang全是报错,所以就想先配置一下文件. 其实它本来的配置我觉得挺好的. 可能因人而异有些地方还是改了改. 原版有英语注释的,就当是学英语了 // While you can e ...

  10. A - A Simple Problem with Integers (线段树的区间修改与区间查询)

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...