Vue 父子组件表单同步校验
子组件代码
// 子组件
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 父子组件表单同步校验的更多相关文章
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- vue中form 表单常用校验封装(async-validator)
新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
- elementui 多组件表单验证
最近在做管理后台,vue2.0基于elementui框架进行开发. elementui的api中表单验证都是单个vue文件的验证.而我的保存按钮放在了父组件了,验证对象为三个子组件我的灵机一动 想 ...
- 【Vue】强化表单的9个Vue输入库
一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...
随机推荐
- P4158 [SCOI2009]粉刷匠(洛谷)
今天A了个紫(我膨胀了),他看起来像个贪心一样,老师说我写的是dp(dp理解不深的缘故QWQ) 直接放题目描述(我旁边有个家伙让我放链接,我还是说明出处吧(万一出处没有了)我讲的大多数题目都是出自洛谷 ...
- docker环境部署mysql
参考文档 docker官方:https://hub.docker.com/_/mysql/?tab=description 部署步骤 1. 拉取镜像 这里我拉取了tag为5.7的镜像 docker p ...
- vue如何使用excel导出后台数据
let params = { // 请求参数 要下载Excel的id 'id':this.excelId }; //导入的接口名 api_excel_exportExcel().then(res =& ...
- 在VS Code中编写IAR项目
在VS Code中编写IAR项目 首先按照网上的教程,下载C/C++插件,以及IAR Eebedded Workbench插件,安装完成重启VS Code. 项目目录下新建.vscode文件夹,并新建 ...
- Unity 基于excel2json批处理读取Excel表并反序列化
excel2json是一款将Excel表格文件快速生成json和C#数据类的高效插件,详情了解如下: https://neil3d.github.io/coding/excel2json.html 该 ...
- 中科大数分教材:用阶乘倒数和计算e值的误差和e是无理数的证明,用到误差计算
\(e=lim_{n \to \infty}e_{n}(1+\frac{1}{n})^n\\\) \(=\lim_{n \to \infty}(\frac{1}{0!}+\frac{1}{1!}+\f ...
- 96年/离职8个月/拒绝华为offer/目前自由职业-记这大半年来的挣扎与迷茫
仅以此文,记录自己这大半年来的挣扎与迷茫. 2019 年 11 月 在公司工作七个月之后,我被裁员了. 回忆自己这七个月的经历,不管是遇到的人和事,更多感到的是收获和感恩,于是我写下了:「应届毕业生工 ...
- Salt组件(一)
一.管理对象属性(Grains) Grains里面记录着每台Minion的一些常用属性,比如CPU.内存.磁盘.网信息等,我们可以通过grains.items查看某台Minion的所有Grains信息 ...
- 解决SyntaxError: Non-UTF-8 code starting with '\xbb'问题
在第一行加入 # coding=utf-8 2020-06-13
- pandas_处理异常值缺失值重复值数据差分
# 处理异常值缺失值重复值数据差分 import pandas as pd import numpy as np import copy # 设置列对齐 pd.set_option("dis ...