0
143
Views¿Cómo agregar soporte de tipo para componentes globales en Vue 3?
Así que tengo Component1 ,
<!-- Component1 --> <script lang="ts" setup> defineProps<{ msg: string }>() </script> <template> <p>{{ msg }}</p> </template>Luego lo registro globalmente,
// main.ts import { createApp } from "vue" import App from "./App.vue" import Component1 from "./Component1.vue" const app = createApp(App) app.component("Component1", Component1) app.mount("#app")Después lo uso como,
<script setup lang="ts"></script> <template> <Component1 /> </template> Sin embargo, no obtengo inferencia de tipo para accesorios para Component1 . Entonces, ¿cómo agrego compatibilidad con texto mecanografiado para este componente global?
·
Santiago Trujillo
2 answers
Answer question0
El paquete vue exporta una interfaz GlobalComponents que se puede ampliar con la definición de su componente global. Por ejemplo, podría agregar el aumento del módulo en src/global-components.d.ts , como se ve en los documentos de Volar :
// src/global-components.d.ts import Component1 from '@/components/Component1.vue' declare module '@vue/runtime-core' { export interface GlobalComponents { Component1: typeof Component1, } } 
·
Santiago Trujillo
Report
0
Encontré la respuesta de @ tony19 casi correcta: Volar reconoció el componente, pero no brindó la sugerencia de tipo adecuada. En cambio, descubrí que necesitaba extender @vue/runtime-core
// src/global-components.d.ts import Component1 from '@/components/Component1.vue' declare module '@vue/runtime-core' { export interface GlobalComponents { Component1: typeof Component1, } }
·
Santiago Trujillo
Report
Answer question