子组件
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>
</el-form>
<script>
export default {
name: 'query',
data() {
return {
rules: {
name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ]
}
}
},
methods: {
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
父组件
<query ref="childRef"></query>
export default {
name: 'index',
methods: {
let flag = this.$refs['childRef'].validateForm()
}
}
*注:在父组件中获取到的flag就是在子组件做的表单校验是否通过如果通过flag为true否则为flase