如何在子 vue 組件中聲明方法？

Question

child.vue：

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

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

父.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'被檢測為類Child？ 我知道創建一個額外的接口然后導入它可以解決這個問題，但是還有其他方法嗎？

Answer 1

第一：您忘記了父組件上的@Component裝飾器。 它不會正確鍵入。

第二個（可選）：您可以使用@Ref裝飾器來保留ref的類型化引用。

第三：您不需要typeof關鍵字。

@Ref('child')
readonly childComponent: Child

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