如何在父组件做子组件的必填校验

1,060 阅读1分钟

子组件

<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