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.validate使用攻略 第二部
Jul 01 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
Highcharts入门之简介
Aug 02 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
React事件处理的机制及原理
Dec 03 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
js实现div色块拖动录制
Jan 16 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
python psutil库安装教程
2018/03/19 Python
python实现自主查询实时天气
2018/06/22 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
基于python实现学生管理系统
2018/10/17 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
高二生物教学反思
2014/01/27 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL