0
306
Views¿Cómo esperar y pasar enum como una propiedad de componente?
Creé una aplicación Vue 3 usando TypeScript. Dentro de la carpeta src creé una nueva enumeración color.ts
enum Color { Red, Blue } export default Color;Creé un componente ColorDisplay.vue
<template> <div> {{ color }} </div> </template> <script lang="ts"> import { defineComponent } from "vue"; import Color from "../color"; export default defineComponent({ props: { color: { type: Color, required: true } } }); </script>y modificó el archivo Home.vue para
<template> <div> <color-display :color="Color.Red" /> <color-display :color="Color.Blue" /> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; import ColorDisplay from "../components/ColorDisplay.vue"; import Color from "../color"; export default defineComponent({ components: { 'color-display': ColorDisplay, } }); </script>Lamentablemente surgen varios problemas:
- En Home.vue, el
Colorimportado no se usa, aunque estoy tratando de usarlo en la plantilla - En ColorDisplay.vue, la enumeración parece ser un tipo de accesorio no válido
¿A alguien le importaría decirme cómo crear una enumeración, esperarla como una propiedad de componente y pasarla a componentes?
2 answers
Answer question0
El valor del type de propiedad del componente está restringido a constructores integrados y clases personalizadas. Las enumeraciones de TS no son clases sino objetos con tipos específicos y no se pueden usar tal cual con type .
Probablemente debería ser:
color: { type: Number as PropType<Color>, required: true }0
Intente anotar las propiedades con un PropType. Objeto como PropType
Aquí la documentación de VueJS 3 para anotar propiedades: https://v3.vuejs.org/guide/typescript-support.html#annotating-return-types