Question

我试图在打字稿中动态地导入单个文件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)

...

myComp.vue

<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>

我认为TypeScript编译时会执行一些递归任务并抛出错误。但是我通过控制逻辑中的someCondition来确保组件不会嵌套自身无限。如何在TypeScript中以递归方式动态导入.vue文件？

vue doc

Answer 1

您将myComp包含在myComp中，并最终进行了无限递归。（您最终得到一个StackOverlow；）。

解决此问题的一种方法是name使用您的组件并使用给定的名称。无需再次导入您的组件。像这样的东西。

 <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>

您可能应该将Vue.extend更改为Vue.component。

Answer 2

将组件注册为全局组件，并使用其名称。

Answer 3

I believe it was an issue with TypeScript, which has now been fixed.

如果遇到问题，请尝试更新。

TypeScript递归中的动态导入Vue文件

3 个答案: