如何在子 vue 组件中声明方法？

Question

child.vue:

<script lang="ts">
import { Vue } from 'vue-property-decorator'

@Component
export default class Child extends Vue {
  public func(): void {
    //
  }
}
</script>

parent.vue:

<template>
  <child ref="child" />
</template>

<script lang="ts">
  import { Vue } from 'vue-property-decorator'
  import Child from './child.vue'

  export default Parent extends Vue {
    public create (): void {
    (this.$refs.child as typeof Child).func()
  }
}

TSLint 错误：

Property 'func' does not exist on type 'Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps>'.

如何让 'typeof Child' 被检测为 Class Child？我知道创建一个额外的接口然后导入它可以解决这个问题，但是还有其他方法吗？

Answer 1

首先：您忘记了父组件上的 @Component 装饰器。它不会正确输入。

第二个（可选）：您可以使用 @Ref 装饰器来保留您的 ref 的类型化引用。

第三：你不需要typeof关键字。

@Ref('child')
readonly childComponent: Child

created () {
   // Correctly typed
   this.childComponent.func()
}