vue.js記錄-表單-父元件呼叫子元件的表單驗證
阿新 • • 發佈:2020-12-10
記錄父元件中呼叫子元件的表單驗證
子元件實現表單驗證
子元件中需要實現呼叫表單驗證的方法,子元件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>