在 typescript mixin 错误中访问 vue 组件 getter (TS2339)答案

【问题标题】：Access vue component getter in tupescript mixin error (TS2339)在 typescript mixin 错误中访问 vue 组件 getter (TS2339)
【发布时间】：2020-05-04 04:49:45
【问题描述】：

我有这个：

import {Component, Vue} from 'vue-property-decorator';

@Component({})
export default class MyMixin extends Vue {
scrollToTop(): void {
        let scrollingWrapper: any = (this.$refs[this.activeTab] as Vue).$refs['scrolling-wrapper'];
        ...
    }
}

然后

export default class MyModal extends MyMixin {
        get activeTab(): string {
            return myStore.activeTab;
        }
}

Mixin 调用组件的 getter，一切正常，但我收到此消息 TS2339: Property activeTab does not exist on type 'MyMixin'。

【问题讨论】：

你在MyMixin类中定义了activeTab吗？
不，我没有。我调用 this.$refs 没有额外的定义。
您使用的打字稿是什么版本的？
打字稿的版本是 3.4.5。

标签： typescript vue.js vue-component mixins

【解决方案1】：

尝试在这里定义它

import {Component, Vue} from 'vue-property-decorator';

@Component({})
export default class MyMixin extends Vue {

activeTab: any;
scrollToTop(): void {
        let scrollingWrapper: any = (this.$refs[**this.activeTab**] as Vue).$refs['scrolling-wrapper'];
        ...
    }
}

【讨论】：

组件少，store 少，所以 activeTab 具有相当动态的行为，不能永远定义一次。
你可以尝试拨打scrollingWrapper而不是activeTab
可能不是，如您所见 - 我根据当前的 activeTab 定义 scrollingWrapper。

【解决方案2】：

这是一个糟糕的解决方案，但我无法找到另一个解决方案。将此转换为任何之前的方法调用。

let scrollingWrapper: any = (this.$refs[(this as any).activeTab] as Vue).$refs['scrolling-wrapper'];

谢谢大家。

【讨论】：