Vue Typescript 子组件方法

Question

我已经使用 Vue 有一段时间了，但已经开始转向使用 Typescript 实现。我遇到了一个问题，我无法通过父级的引用访问子级的方法。

家长代码：

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

<script lang="ts">
import Vue from "vue";
import RefTest from "./RefTest.vue";

export default Vue.extend({
  name: "RefParent",
  components: {
    RefTest
  },
  data: () => ({}),
  methods: {},
  mounted() {
    const child = this.$refs.child as RefTest;
    child.pingMe();
  }
});
</script>

<style scoped></style>

儿童代码：

<template>
  <div>REF TEST...</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "RefTest",
  data: () => ({}),
  methods: {
    pingMe() {
      console.log("refTest pingMe");
    }
  }
});
</script>

<style scoped></style>

我看到的问题是，在父级中，当我用 const 引用子级时，child = this.$refs.child as RefTest;我看到错误：'RefTest' refers to a value, but is being used as a type here.。此外，据child.pingMe();报道：Property 'pingMe' does not exist on type 'Vue'.

我尝试了在这里找到的各种解决方法： https: //github.com/vuejs/vue/issues/8406主要围绕接口定义和Vue.extend<>调用。

我感谢任何帮助我继续理解使用 Typescript 的差异的帮助。

Answer 1

好的。做了更多实验，我不确定这是“正确”的解决方案还是最优雅的解决方案，但代码可以工作并且编译器不会抱怨。最终我创建了一个接口类型，其中包含我想要达到的方法。在父级中，我现在将 $ref 转换为该接口类型，一切似乎都很好。请告诉我是否有更好更优雅的方法（或者这是“最佳”方法），请参阅下面的完整代码。

接口（类型/refInterface.ts）：

import Vue from "vue";

export interface RefInterface extends Vue {
  pingMe(): void;
}

家长：

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

<script lang="ts">
import Vue from "vue";
import RefTest from "./RefTest.vue";
import { RefInterface } from "@/types/refInterface";

export default Vue.extend({
  name: "RefParent",
  components: {
    RefTest
  },
  data: () => ({}),
  methods: {},
  mounted() {
    const child = this.$refs.child as RefInterface;
    child.pingMe();
  }
});
</script>

<style scoped></style>

“子”代码没有更改以使其正常工作，因此没有重新粘贴它。