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

• Z时代
• 2024-01-10
• 分类：技术分享

贴上代码：
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，
这是什么原因呢？是我组件的原因还是我调用的问题

求大佬们帮忙

回答

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

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

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

// 将form实例返回到父级

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

this.$refs.ruleForm.validate();

以上是 【Vue】封装的form组件 调用时报错this.$refs[formName].validate 找不到是什么原因 的全部内容， 来源链接： utcz.com/a/80943.html