vue2.0 ts项目中, 父组件如何定义补全子组件类型,调用它的方法及成员?

wgf4242
  • 90

用@ref试了下不能补全与识别方法。


    import TempTable from './TempTable.vue'
    export default ******* {
        @Ref('mytable') mytable !: TempTable
        onTest() {
            this.mytable.selectedRowKeys = [] // 报错
        }
    }

this.mytable这样不能补全与提示类型。还报错。

TS2339: Property 'selectedRowKeys' does not exist on type 'Vue'.

还是识别为一个vue类型。

回复
阅读 1.2k
1 个回答
然后去远足
  • 34.7k
✓ 已被采纳

因为你导入的对象的 TS 类型是 Vue

还记得你在 shims-vue.d.ts 里加的吗:

declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
}

正确的做法应是给组件补充单独的声明文件。

比如在 TempTable.d.ts 中(一定要是 .d.ts 不能是 .ts):

/// <reference types="vue" />
// 上面那句是有用的,不是注释

declare interface TempTable extends Vue {
    selectedRowKeys: string[];
}

然后导入:

// 这里要换个名了,不能是刚刚声明的 TempTable
import TempTableComponent from './TempTable.vue';

@Component({
    components: {
        TempTableComponent
    }
})
export default ******* {
    @Ref('mytable')
    public mytable !: TempTable // 这里是 TempTable
    
    private onTest() {
        this.mytable.selectedRowKeys = [];
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏