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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JS中min函数实例讲解
Feb 18 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
php实现记事本案例
2020/10/20 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Python探索之自定义实现线程池
2017/10/27 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
解决Django中多条件查询的问题
2019/07/18 Python
在python中用url_for构造URL的方法
2019/07/25 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python中有几个关键字
2020/06/04 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
自荐信写法介绍
2014/01/25 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
婚礼新人答谢词
2015/01/04 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
蜗居观后感
2015/06/11 职场文书