0
148
Visualizações¿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 Respostas
Responde à pergunta0
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
Relatório
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
Relatório
Responde à pergunta