2

我正在使用 vue-class-component 并且我有一个导入的函数，我想将其用作组件方法的值。为了说明我想要实现的目标，假设我有一个文件 TestComponent.vue，它看起来像这样：

<template>
  <div class="wrapper">
    <div class="text">{{ helper() }}</div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import helper from './helper';

  @Component({
    name: 'TestComponent' 
  })
  export default class TestComponent extends Vue {
    someString = 'I want it to be shown';
    helper = helper;
  }
</script>

我的 helper.ts 文件是这样的：

export default function(this: any) {
  return `${ this.someString } [ this text was added in helper function ]`; 
}

问题是我不想this在 helper.ts 中指定any类型。我希望它是一种 TestComponent 类。但是当我输入这个时：

import TestComponent from './TestComponent.vue';

export default function(this: TestComponent) {
  return `${ this.someString } [ this text was added in helper function ]`; 
}

我有一个错误，提示“'Vue' 类型上不存在属性 'someString'”。我找到了解决方案。如果我将一个类定义放到一个单独的文件中，比如说 TestComponentClass.ts，然后在 TestComponent.vue 和 type 中导入它export default class TestComponent extends TestComponentClass {}，我也可以在 helper.ts 中导入这个类并将其用作this函数内的关键字类型。但这似乎太乏味了。

所以我的问题是：

  1. 有没有更好的方法来实现这一目标？
  2. @Component 装饰器实际上如何影响类的类型？我试图在官方文档中寻找答案，但它没有深入解释这个装饰器的实现。

提前致谢！

4

1 回答 1

0

您可能会使用一种叫做mixin的东西。这个想法是，而不是写

export default TestComponent extends Vue {}

您编写扩展 Vue 的单独类，在其中指定所需的所有其他属性，并将 TestComponent 重写为扩展 mixins 而不是直接 Vue：

测试混合.ts

import Component, { Vue } from 'vue-class-component'

@Component()
export default class TestMixin extends Vue {
  someString = 'Anything you want it to be';
}

测试组件.vue

import Component, { mixins } from 'vue-class-component'
import TestMixin from './mixins/TestMixin';

@Component()
export default class TestComponent extends mixins(TestMixin) { ... }

这样，TestComponent 将拥有您的“someString”属性。

于 2021-06-19T20:05:19.077 回答