子组件代码

// 子组件
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. Appium+Python3环境搭建,其实超简单!【软件测试教程】

    appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.略懂Python,所以接下来的教程是appium+python, ...

  2. Python Ethical Hacking - VULNERABILITY SCANNER(3)

    Polish the Python code using sending requests in a session Class Scanner. #!/usr/bin/env python impo ...

  3. SpringBoot2.x入门教程:引入jdbc模块与JdbcTemplate简单使用

    这是公众号<Throwable文摘>发布的第23篇原创文章,收录于专辑<SpringBoot2.x入门>. 前提 这篇文章是<SpringBoot2.x入门>专辑的 ...

  4. Java常用开源库

    Java的经久不衰,很大程度上得益于Java的生态好.在日常开发中,我们也会经常使用到各种开源库和工具类,为了避免重复造轮子,本文将贴出工作及学习中会用到的部分开源库和工具类.Java的生态实在太大, ...

  5. vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题

    一般来说,VUE项目中,this指向VUE实例. 但有的时候,某些代码会改变this的指向. 这时,可以用一个临时变量存储VUE实例. test1(){ var _this = this // 把vu ...

  6. Ordinary - 官方原版软件下载站

    官网:http://a-1.vip/exe/

  7. 聊一聊Flutter的setState()

    Flutter 里面包含两种widget 一种可变的,一种不可变的: 在可变的widget中可以使用 setstate(){} 函数. 官方也给出了例子: _onClick(){ setState() ...

  8. 小白必看,Python入门你要懂那些

    Python作为为数不多的全场景开发语言之一,近年来已经获得了越来越多人的关注,而整个IT行业也释放出了大量的Python就业岗位.因此,当前学习Python语言是非常不错的选择,文泽带你进一步走进P ...

  9. Java Web(3)-XML

    一.XML简介 1. 什么是xml? xml 是可扩展的标记性语言 2. xml的作用? 用来保存数据,而且这些数据具有自我描述性 它还可以做为项目或者模块的配置文件 还可以做为网络传输数据的格式(现 ...

  10. PHP end() 函数

    实例 输出数组中的当前元素和最后一个元素的值: <?php$people = array("Peter", "Joe", "Glenn" ...