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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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中取得image按钮传递的name值
2006/10/09 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
质量月活动策划方案
2014/03/10 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
公司欠款证明
2015/06/24 职场文书
九年级历史教学反思
2016/02/19 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Nginx配置根据url参数重定向
2022/04/11 Servers
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers