3.Form组件：

<template>
<div>
    <!--这是我们自己的input组件-->
    {{ruleForm}}
    <m-form :model="ruleForm" :rules="rules" ref="rulebox">
        <m-form-item label="用户名" prop="name">
            <m-input v-model="ruleForm.name"></m-input>
        </m-form-item>
        <m-form-item label="年龄" prop="age">
            <m-input type="age" v-model="ruleForm.age"></m-input>
        </m-form-item>
        <m-form-item lable="密码" prop="pass">
            <m-input type="password" v-model="ruleForm.pass"></m-input>
        </m-form-item>
        <!--这里新加了按钮用于最后的提交-->
        <m-form-item>
            <el-button type="primary" @click="submitForm('rulebox')">提 交</el-button>
        </m-form-item>
    </m-form>
</div>
</template>

<script>
import MInput from './Input';
import MFormItem from './FormItem';
import MForm from './FormComponent';
export default {
    components: {
        MInput,
        MFormItem,
        MForm,
    },
    data() {
        return {
            ruleForm: {
                pass: '98',
                age: '18',
                name: '索隆',
            },
            rules: {
                name: [{
                        required: true,
                        message: '请输入名字',
                    },
                    {
                        min: 2,
                        max: 4,
                        message: '请输入2~4位用户名',
                    },
                ],
                pass: [{
                        require: true,
                        message: '请输入密码',
                    },
                    {
                        min: 6,
                        max: 10,
                        message: '请输入6~10密码',
                    },
                ],
                age: [{
                    require: true,
                    message: '请输入年龄',
                }, ],
            },
        };
    },
    methods: {
        submitForm(name) {
            console.log(name);
            console.log('我是validate的refs[name]', this.$refs);
            //这里拿到的是FormComponent组件的实例去调用他的validate方法
            this.$refs[name].validate((valid) => {
                console.log('我是validate', valid);
                if (valid) {
                    alert('哎呦不错哦，通过验证了');
                } else {
                    alert('请仔细检查您的提交内容');
                }
            });
        },
    },
};
</script>