A veces podemos extraer accesorios comunes usando props en la función defineComponent como se muestra a continuación. Ambos funcionan en vue2/vue3 pero no en SFC.
// common-props.js export default { commonProps: { enabled: Boolean, readonly: Boolean, } } // my-component.vue import { commonProps } from './common-props'; export default { props: { ...commonProps, visible: Boolean, text: { type: String, default: '', } } }; Pero cuando actualizo a <script setup> . Los props están definidos por defineProps que es una macro del compilador. Tengo que intentar usar mecanografiado extendido los accesorios de la siguiente manera. Pero los accesorios combinados no son visibles desde DevTools.
// common-props.ts export interface CommonProps{ enabled?: boolean, readonly?: boolean, } // my-component.vue <script setup lang="ts"> import CommonProps from './common-props'; interface MyComponentProps extends CommonProps { visible?: boolean, text?: string, } const props = withDefaults(defineProps<ICheckBoxProps>(), { visible: false, text: '', }); </script>Mi pregunta es cómo extraer accesorios de componentes SFC. Y haga que Vue Devtools pueda reconocer los accesorios extraídos.
Props de solo tipo/declaraciones de emisión
A partir de ahora, el argumento de declaración de tipo debe ser uno de los siguientes para garantizar un análisis estático correcto:
- Un literal de tipo
- Una referencia a una interfaz o un tipo literal en el mismo archivo
Actualmente, los tipos complejos y las importaciones de tipos de otros archivos no son compatibles. En teoría, es posible admitir importaciones de tipo en el futuro.
Entonces, la respuesta corta es no, actualmente no es posible usar tipos importados cuando se usa la declaración de accesorios de solo tipo
Pero aún puede usar la declaración de accesorios que no son de tipo (basada en objetos) dentro script setup
// CommonProps.js export default { enabled: Boolean, readonly: Boolean, } // Component.vue <script setup lang="ts"> import {ref} from "vue"; import CommonProps from "./CommonProps.js" const props = defineProps({ ...CommonProps, items: { type: Array, default: () => [] } }) </script> <template> <pre>{{ props }}</pre> </template>