Javascript Vue js动态导入组件

我有以下父组件，它必须呈现动态子组件列表：

<template>
  <div>
    <div v-for="(componentName, index) in supportedComponents" :key="index">
      <component v-bind:is="componentName"></component>
    </div>
   </div>
 </template>

<script>
const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");
export default {
  name: "parentComponent",
  components: {
    Component1,
    Component2
  },
  props: {
    supportedComponents: {
      type: Array,
      required: true
    }
  }
};
</script>

const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");

然后像这样注册它们：

components: {
  Component1,
  Component2
}

我想让我的

parentComponent

尽可能通用。这意味着我必须找到一种方法来避免导入语句和注册中硬编码的组件路径。我想将导入和呈现的子组件注入到父组件中

这在Vue中可能吗？如果是，那么如何？

在运行时解析动态网页包导入（） 您可以动态设置

import（）

函数的路径，以根据组件状态加载不同的组件

<template>
  <component :is="myComponent" />
</template>

<script>
export default {
  props: {
    component: String,
  },

  data() {
    return {
      myComponent: '',
    };
  },

  computed: {
    loader() {
      return () => import(`../components/${this.component}`);
    },
  },

  created() {
    this.loader().then(res => {
      // components can be defined as a function that returns a promise;
      this.myComponent = () => this.loader();
    },
  },
}
</script>

导出默认值{
道具：{
组件：字符串，
},
数据（）{
返回{
myComponent:“”，
};
},
计算：{
加载器（）{
return（）=>import（`../components/${this.component}`）；
},
},
创建（）{
this.loader（）.then（res=>{
//组件可以定义为返回承诺的函数；
this.myComponent=（）=>this.loader（）；
},
},
}

---

注意：JavaScript在运行之前由浏览器编译。这与如何解析网页包导入无关。

您可以在创建的生命周期内加载组件，并根据数组属性进行注册：

导出默认值{
名称：“父组件”，
组件：{}，
道具：{
支持的组件：{
类型：数组，
必填项：true
}
},
创建（）{
for（设c=0；c导入（'./'+componentName+'.vue'）；
}
}
};

---

工作得很好

这是一个有效的代码，只需确保动态导入中有一些字符串，否则会出现“找不到模块”

导出默认值{数据（）{
返回{
componentToDisplay:空
    }
  },
计算：{
当前（）{
if（此.componentToDisplay）{
return（）=>import（'@/components/notices/'+this.componentToDisplay）
      }
return（）=>import（“@/components/notices/LoadingNotice.vue”）
    }
  },
挂载（）{
this.componentToDisplay='Notice'+this.$route.query.id+'.vue'
  }
}

您可以将组件作为道具传递吗？但是您必须在某个地方静态导入组件。

import（）

在编译期间解析，因此您需要在编译期间解析它。我得到

无法解析异步组件…，原因：错误：找不到模块'@/components/General/TextLink.vue'

。因此它找不到模块，但这是正确的路径。在没有我的脚本的情况下导入工作吗？如果没有，可能是另一个issue.为了澄清@Launemax的答案，import语句必须是。因此

import（componentName）

将产生“无法解析异步组件…”错误。而import（'./'+componentName+'.vue'）将在我的情况下工作，我得到一个“无法装载组件：模板或呈现函数未定义”。组件在正常导入时工作正常。此的console.log。$options.components显示组件已注册。路径三重和四重已选中。屏幕截图：–有想法吗？这不起作用，我正在获取运行时核心。esm bundler.js？5c40:38[Vue warn]：无效的VNode类型：未定义（未定义）是否使用默认导出？如果使用命名导出，则可以尝试导入（…）。这样动态加载时，是否仍需要注册组件？我发现在将动态导入到组件：{}对象中之前，组件无法正确显示。还必须添加defineAsyncComponent（）

       <component :is="current" />
    export default {  data () {
    return {
      componentToDisplay: null
    }
  },
  computed: {
    current () {
      if (this.componentToDisplay) {
        return () => import('@/components/notices/' + this.componentToDisplay)
      }
      return () => import('@/components/notices/LoadingNotice.vue')
    }
  },
  mounted () {
    this.componentToDisplay = 'Notice' + this.$route.query.id + '.vue'
  }
}