封装的form组件 调用时报错this.$refs[formName].validate 找不到是什么原因

Question

贴上代码：
html部分

   <mt-form-item label="姓名" :cc="24" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </mt-form-item>
          <mt-form-item label="电话" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </mt-form-item>
          <mt-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </mt-form-item>
          <mt-button
            type="primary"
            icon="el-icon-success"
            label="保存"
            @click="submitForm('ruleForm')"
          ></mt-button>
          <mt-button type="primary" label="登录" @click="resetForm('ruleForm')"></mt-button>
        </mt-form>

js部分

 // 表单属性
    ruleForm: {
    name: '',
    tel: '',
    email: ''
      },

   rules: {
 name: [
 { required: true, message: '请输入活动名称', trigger: 'blur' },
 { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
   tel: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
  email: [
 { required: true, message: '请输入活动名称', trigger: 'blur' },
 { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]
      }

报错内容：

打印this.$refs[formName]可以打印出来，但是打印this.$refs[formName].validate 就是underfined，
这是什么原因呢？是我组件的原因还是我调用的问题

求大佬们帮忙

Answer 1

你的form html代码没贴全吧。
检查一下form标签上是否有ref和rules的绑定

Answer 2

代码展示不全, 建议把官方demo复制运行一下, 查看代码是不是哪里写错了

Answer 3

封装的组件 有没有在子组件把实例返回给父组件

// 将form实例返回到父级

this.$emit('update:refObj', this.$refs.form)

Answer 4

this.$refs.ruleForm.validate();