this.$refs类型识别问题 - 最详细解决方案 -【vue+typescript】

typescript是强类型所致 - typescript不能识别出this.$refs.xx是否含有xx2方法方法1 - 任何类型 - 不推荐 - 一劳永逸let myRef: any = this.$refs.myModal;myRef.resetFields(); //清空表单校验方法2 - HTMLFormElement - 推荐 - 一劳永逸//成员变量$refs!: {myMod

嗯嗯**

6912人浏览 · 2020-10-11 23:12:41

嗯嗯** · 2020-10-11 23:12:41 发布

typescript是强类型所致 - typescript不能识别出this.$refs.xx是否含有xx2方法

在这里插入图片描述

方法1 - 任何类型 - 不推荐 - 一劳永逸

let myRef: any = this.$refs.myModal;
myRef.resetFields(); //清空表单校验

方法2 - HTMLFormElement - 推荐 - 一劳永逸

//成员变量
$refs!: {
    myModal: HTMLFormElement  //写法1 - 推荐
     
    //myModal: Vue & {resetFields : Function}   写法2  - 不推荐
    
    //找到xx2所在的接口并引入到组件中 
   //myModal: Vue & WrappedFormUtils  写法3 -  不推荐

};


handleCancel(e: object) {
    this.$refs.myModal.resetFields(); //清空表单校验
}

方法3 - 断言 - 不推荐

//写法1 - as
(this.$refs.myModal as Vue & {resetFields:Function}).resetFields();

//写法2 - <>
(< Vue & {resetFields : Function}>(this.$refs.myModal)).resetFields();

方法4 - 自己继承一个接口模板 - 推荐 - 因为支持多继承 - 在全部Vue组件中通用

AntTemplateMethod.ts文件中
在这里插入图片描述

找接口模板
在这里插入图片描述

在这里插入图片描述

App.vue文件中
在这里插入图片描述

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^