当前位置 博文首页 > 嗯嗯**的博客:this.$refs类型识别问题 - 最详细解决方案 -【vue

    嗯嗯**的博客:this.$refs类型识别问题 - 最详细解决方案 -【vue

    作者:[db:作者] 时间:2021-08-06 09:45

    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文件中
    在这里插入图片描述

    在这里插入图片描述

    cs