vue3 ts 如何让子组件通过 defineExpose 暴露的方法有代码提示

这篇文章距离上次修改已过264天，其中的内容可能已经有所变动。

在Vue 3中，使用TypeScript时，如果想要通过defineExpose使得子组件暴露的方法具有类型提示，可以在父组件中定义一个接口来描述子组件暴露的属性和方法。

以下是一个简单的例子：

首先，定义子组件暴露的方法的接口：

// ChildComponent.ts
export interface ChildComponentExposedMethods {
  doSomething(): void;
  getValue(): number;
}

然后，在子组件中使用defineExpose来暴露方法：

<template>
  <!-- 子组件模板 -->
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const doSomething = () => {
      // 实现功能
    };

    const value = ref(0);
    const getValue = () => {
      return value.value;
    };

    // 暴露的方法
    const exposed = { doSomething, getValue } as ChildComponentExposedMethods;

    // 在Vue 3中使用defineExpose来暴露属性和方法
    defineExpose(exposed);

    return {};
  },
});
</script>

最后，在父组件中接收并使用这些方法时会有类型提示：

<template>
  <ChildComponent ref="childComp"/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';

export default defineComponent({
  name: 'ParentComponent',
  setup() {
    const childComp = ref<Nullable<ChildComponentExposedMethods>>(null);

    const callChildMethod = () => {
      if (childComp.value) {
        childComp.value.doSomething();
        console.log(childComp.value.getValue());
      }
    };

    return {
      childComp,
      callChildMethod,
    };
  },
});
</script>

在父组件中，通过ref创建了一个childComp引用，并指定了它的类型为Nullable<ChildComponentExposedMethods>，这样在调用子组件暴露的方法时，就会有代码提示。

vue3 ts 如何让子组件通过 defineExpose 暴露的方法有代码提示

评论已关闭

推荐阅读