如何允许从 Vue3 单个文件组件导出多个？

Question

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

child:

<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>

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

parent:

<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 枚举时，它只是未定义。我需要做什么才能正确导出命名枚举？谢谢！

Answer 1

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

例如，src 文件夹中的 types.ts 文件可以像这样定义和导出枚举：

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

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

import { PagesListType } from '@/types';

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

Answer 2

我可以通过不导出枚举，而是将其作为属性添加到导出的默认组件来使它起作用：

child:

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

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

parent:

<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>

如何允许从 Vue3 单个文件组件导出多个？

How to Allow Multiple Exports from a Vue3 Single File Component?

javascript

vue.js

es6-modules