0

我正在为自定义列表制作 Vue3 单文件组件。在我的单文件组件中，我想导出主要的默认 Vue 组件，还想导出声明它是什么类型的列表的枚举：

孩子：

<template>
  <Listbox>
    <template #header>
      <h5>{{listType}}</h5>
    </template>
  </Listbox>
</template>

<script lang="ts">
export enum PagesListType {
  RecentlyCreated = 'Recently Created',
  RecentlyModified = 'Recently Modified',
  Starred = 'Starred'
};

export default {
  props: {
    listType: PagesListType
  },
  data() {
    return {
      pages: [],
      PagesListType
    };
  },
};

</script>

枚举仅在该组件的上下文中才有意义，因此我不想将它放在其他类型的文件夹中。它仅与此列表的行为有关。但是当我尝试在父组件中执行此操作时，它失败了：

家长：

<template>
  <div>
    <PagesList :listType="PagesListType.RecentlyCreated"></PagesList>
    <PagesList :listType="PagesListType.RecentlyModified"></PagesList>
    <PagesList :listType="PagesListType.Starred"></PagesList>
  </div>
</template>

<script lang="ts">
import PagesList, { PagesListType } from './PagesList.vue';

export default {
  //parent component details
};
</script>

当我导入命名的 PagesListType 枚举时，它只是未定义的。我需要做什么才能正确导出命名枚举？谢谢！

4

2 回答 2

1

我认为您需要导出enum到单独的文件中并将其导入到不同的文件中才能使用它。你把这个文件放在哪里主要取决于你，你想如何构建你的项目。

例如，types.tssrc 文件夹中的文件可以定义和导出枚举，如：

export enum PagesListType {
  RecentlyCreated = 'Recently Created',
  RecentlyModified = 'Recently Modified',
  Starred = 'Starred'
}

您可以通过像以下方式导入枚举来在任何地方使用它：

import { PagesListType } from '@/types';

您必须使用 @/ 而不是 src/。因为 tsconfig.json 文件中可用的 TypeScript 配置中的 src 文件夹到 @ 。

于 2021-10-01T07:06:00.613 回答
1

我能够通过不导出枚举来使其工作，而是将其作为属性添加到导出的默认组件中：

孩子：

enum PagesListType {
  RecentlyCreated = 'Recently Created',
  RecentlyModified = 'Recently Modified',
  Starred = 'Starred'
};

export default {
  props: {
    listType: PagesListType
  },
  PagesListType,
  data() {
    return {
      pages: [],
      PagesListType
    };
  },
};

家长：

<template>
  <div>
    <PagesList :listType="created"></PagesList>
    <PagesList :listType="modified"></PagesList>
    <PagesList :listType="starred"></PagesList>
  </div>
</template>

<script lang="ts">
import PagesList from './PagesList.vue';

export default {
  computed: {
    created() {
      return PagesList.PagesListType.RecentlyCreated;
    },
    modified() {
      return PagesList.PagesListType.RecentlyModified;
    },
    starred() {
      return PagesList.PagesListType.Starred;
    }
  },
//other parent implementation details omitted
};
</script>
于 2021-10-01T18:49:59.533 回答