如何在Vue3单文件组件中实现多导出，同时导出默认组件和枚举？

问题原因 #

Vue 单文件组件（SFC）的默认编译逻辑仅会对外暴露export default定义的组件实例，顶层的其他命名导出默认不会被编译到最终的导出对象中，因此父组件直接命名导入拿到的PagesListType会是undefined。

解决方案 #

方案1：将枚举挂载为组件静态属性（适配当前Options API写法） #

修改子组件的导出逻辑，把枚举挂到默认导出的组件对象上：

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

export default {
  // 新增这行，把枚举作为组件的静态属性导出
  PagesListType,
  props: {
    listType: PagesListType
  },
  data() {
    return {
      pages: [],
      PagesListType
    };
  },
};
</script>

父组件导入后从组件实例上取枚举即可：

import PagesList from './PagesList.vue';

export default {
  components: { PagesList },
  data() {
    return {
      // 从组件实例获取枚举
      PagesListType: PagesList.PagesListType
    }
  }
};

方案2：多script块分离类型导出（适配所有工具链版本） #

在SFC中新增一个独立的script块专门用于导出公共类型，和业务逻辑分离：

<!-- 专门用于对外导出枚举 -->
<script lang="ts">
export enum PagesListType {
  RecentlyCreated = 'Recently Created',
  RecentlyModified = 'Recently Modified',
  Starred = 'Starred'
};
</script>

<!-- 业务逻辑script块 -->
<script lang="ts">
export default {
  props: {
    listType: {
      type: String as () => PagesListType,
      required: true
    }
  },
  data() {
    return {
      pages: [],
      PagesListType
    };
  },
};
</script>

这种写法下父组件可以直接正常命名导入：

import PagesList, { PagesListType } from './PagesList.vue';

方案3：升级工具链后使用