vue.js记录-表单-父组件调用子组件的表单验证
记录父组件中调用子组件的表单验证
子组件实现表单验证
子组件中需要实现调用表单验证的方法,子组件OrderInput.vue如下代码:
<template> <div> <el-form :model="postForm" ref="postForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="数值" prop="num" :rules="[{ required: true, message: '不能为空', trigger: 'change'}]" > <el-input type="number" v-model.number="postForm.num" autocomplete="off"></el-input> </el-form-item> </el-form> </div> </template> <script> export default { props: { obj: { type: Object, default: undefined } }, data(){ return { postForm: { num: this.obj?this.obj.num:undefined } } }, methods: { submitForm () { return new Promise(function (resolve, reject) { this.$refs.postForm.validate(valid => { resolve(valid) }) }) } } } </script>
submitForm()方法,就是子组件中实现的调用当前表单验证的方法
父组件设置子组件的ref
父组件需要在使用子组件是,为子组件定义ref,之后再通过refs获取子组件对象调用子组件的表单验证方法。父组件实现如下:
<template> <div> <h1>验证表单</h1> <order-input ref="order" :obj="postForm"></order-input> <el-button type="primary" @click="handleClick" > 提交 </el-button> </div> </template> <script> import OrderInput from './OrderInput' export default { components: { OrderInput }, data () { return { postForm: { age: undefined } } }, methods: { handleClick () { this.$refs.order.submitForm().then(valid => { if(valid){ console.log(valid, '提交表单') }else{ console.log(valid, '验证不通过') } }) } } } </script>