如何在子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”被检测为类Child？我知道创建一个额外的接口，然后导入它可以解决这个问题，但是有没有其他方法呢？

Answer 1

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

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

第三:您不需要typeof关键字。

@Ref('child')
readonly childComponent: Child

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