Estoy haciendo un componente de archivo único Vue3 para una lista personalizada. En mi componente de archivo único, quiero exportar el componente principal predeterminado de Vue, pero también la enumeración que declara qué tipo de lista es:
niño:
<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>La enumeración solo tiene sentido dentro del contexto de este componente, por lo que no quiero ponerlo en otra carpeta de tipos. Solo se relaciona con el comportamiento de esta lista. Pero cuando trato de hacer esto en el componente principal, falla:
padre:
<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>Cuando importo la enumeración PagesListType nombrada, simplemente no está definida. ¿Qué debo hacer para exportar la enumeración nombrada correctamente? ¡Gracias!
Creo que necesita exportar la enum en un archivo separado e importarlo en diferentes archivos para usarlo. Dónde coloque este archivo depende principalmente de usted, cómo desea estructurar su proyecto.
Por ejemplo, el archivo types.ts en la carpeta src puede definir y exportar la enumeración como:
export enum PagesListType { RecentlyCreated = 'Recently Created', RecentlyModified = 'Recently Modified', Starred = 'Starred' }puede usar la enumeración en cualquier lugar importándola como:
import { PagesListType } from '@/types';tienes que usar @/ en lugar de src/. debido a la carpeta src a @ en su configuración de TypeScript disponible en el archivo tsconfig.json.
Pude hacer que esto funcionara al no exportar la enumeración, sino agregarla como una propiedad al componente predeterminado exportado:
niño:
enum PagesListType { RecentlyCreated = 'Recently Created', RecentlyModified = 'Recently Modified', Starred = 'Starred' }; export default { props: { listType: PagesListType }, PagesListType, data() { return { pages: [], PagesListType }; }, };padre:
<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>