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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js分页代码分享
Apr 28 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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笔试题
2009/08/04 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP 断点续传实例详解
2017/11/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python图片的横坐标汉字实例
2019/12/04 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
道路施工安全责任书
2014/07/24 职场文书
党支部意见范文
2015/06/02 职场文书
python xlwt模块的使用解析
2021/04/13 Python
详解Python中的进程和线程
2021/06/23 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS