J'ai essayé d'importer dynamiquement un seul composant de vue de fichier en lui-même au format dactylographié et j'ai obtenu une erreur:
<template>
<div>
<my-comp v-if="someCondition"></my-comp>
</div>
</template>
<script lang="ts">
export default Vue.extend({
data(){
return{};
},
components:{
myComp:()=>import('./myComp.vue')//Which is the name of current file, this is a official usage for dynamic loading vue component, and every thing is right in native JavaScript(not in TypeScript)
}
})
</script>
myComp.vue
/Users/lilei/Desktop/designer-web/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:22
throw error;
^
RangeError: Maximum call stack size exceeded
at getSymbolLinks (/Users/lilei/Desktop/designer-web/node_modules/typescript/lib/typescript.js:31794:32)
at getDeclaredTypeOfTypeAlias (/Users/lilei/Desktop/designer-web/node_modules/typescript/lib/typescript.js:36457:25)
...
Je pense que certaines tâches récursives sont effectuées lors de la compilation de TypeScript et ont généré une erreur. Mais je m'assure que le composant ne sera pas imbriqué à l'infini en contrôlant la someCondition dans ma logique. Comment importer de manière dynamique un fichier .vue de manière récursive dans TypeScript?
3 Réponses :
Vous incluez myComp dans myComp et vous vous retrouvez avec une récursion infinie. (vous vous retrouvez avec un StackOverlow;).
Une façon de résoudre ce problème est de name votre composant et d'utiliser le nom donné. Il n'est pas nécessaire d'importer à nouveau votre composant. Quelque chose comme ça.
<template>
<div>
<my-comp v-if="someCondition"></my-comp>
</div>
</template>
<script lang="ts">
export default Vue.extend({
name: 'my-comp',
data(){
return{};
},
components:{
}
})
</script>
Et vous devriez probablement changer Vue.extend en Vue.component .
Dans mon cas, j'ai donné au composant myComp une promesse de partage de code webpack et lorsque je créerai une instance en html, cela sera résolu dynamiquement. Mais TypeScript peut effectuer des vérifications statiques lors de la compilation. TypeScript n'est-il pas entièrement pris en charge par le fractionnement de code Webpack?
Enregistrez le composant sur global et utilisez-le avec le nom.
Je pense que c'était un problème avec TypeScript, qui a a été corrigé.
Essayez de mettre à jour si vous rencontrez le problème.
Utilisez la propriété
name, pas besoin d'inclure le composant lui-même.@Nit Existe-t-il un moyen de mettre en œuvre Références circulaires Entre les composants par
nom?Pour autant que je sache, non, mais c'est aussi très différent de la question que vous avez posée au départ.
@Nit Oui, utiliser la propriété
nameest un bon moyen de résoudre mon problème initial, merci.