vue 表单验证按钮事件交由父组件触发的方法


Posted in Javascript onDecember 17, 2018

vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法

子组件:

//内容部分

<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
  <FormItem label="Age" prop="age">
    <Input type="text" v-model="formCustom.age" number></Input>
  </FormItem>
  <FormItem>
    <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
    <Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
  </FormItem>
</Form>

子组件js部分

export default {
  data () {
    return {
      formCustom: {
        age: ''
      },
      ruleCustom: {
        age: [
          { required: true, message: '年龄不为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const form = this.formCustom
          // 在这将事件传递出去
          this.$emit('submit', form)
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    }
  }
}

父组件:

//子组件
 <modalContent @submit="handleSubmit"/>

父组件js部分

import modalContent from '子组件位置(这里没写)'
export default {
  components: { modalContent },
  data () {
    return {}
  },
  methods: {
    // 子组件的点击触发事件
    handleSubmit(form) {
      this.$Message.success('Success!');
    }
  }
}

遇到某些xiagn要将按钮写在父组件上,但又需要调用子组件做验证之类的时候可以借鉴一下,验证请忽略,这里主要是按钮的事件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js实现导航吸顶效果
Feb 24 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
详解vue中移动端自适应方案
May 05 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 #Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 #Javascript
详解Vue This$Store总结
Dec 17 #Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
js实现移动端轮播图
Dec 21 #Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
You might like
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
文本加密解密
2006/06/23 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Python实现截屏的函数
2015/07/25 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
详解Python3注释知识点
2019/02/19 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
简历自荐信
2013/12/02 职场文书
高中校园广播稿
2014/10/21 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
JavaScript流程控制(循环)
2021/12/06 Javascript