vue.js 动态导入和加载组件答案

【问题标题】：vue.js Import and load component dynamicallyvue.js 动态导入和加载组件
【发布时间】：2020-12-09 11:36:00
【问题描述】：

我正在尝试让以下代码从文件夹中动态导入组件。但是，vue 不会导入任何内容或显示错误。（就好像它没有感知到计算域的变化）。

我做错了什么？（我已经浏览过论坛，这似乎很少见）

<template>
  <component v-bind:is="column"></component>
</template>

<script>
export default {
  name: "Column",
  computed: {
    column() { 
      return () => import(`../columns/${this.$store.state.column}.vue`);
    },
  }
};
</script>

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

首先您需要导入/注册所有组件，您可以像下面这样在组件级别执行此操作，也可以全局执行此操作。

export default {
   components: {
     ColumnA: () => import('../columns/ColumnA'),
     ColumnB: () => import('../columns/ColumnB'),
     ColumnC: () => import('../columns/ColumnC'),
     ColumnD: () => import('../columns/ColumnD'),
   }
}

接下来，您必须确保可以将您的状态映射到 column-a 以匹配组件名称。如果是这种情况，您可以使用：

computed: {
   column() {
      return this.$store.state.column;
   }
}

如果没有，您将不得不创建地图：

computed: {
   column() {
      const mappedComponents = {
         myStateKeyForColumnA: 'column-a',
         myStateKeyForColumnB: 'column-b',
         myStateKeyForColumnC: 'column-c',
         myStateKeyForColumnD: 'column-d',
      }
      return mappedComponents[this.$store.state.column];
   }
}

编辑要全局注册组件，可以使用require.context。

在 main.js 中

const context = require.context('./path/to/columns', true, /\.vue$/)

for (const key of context.keys()) {
  // key gives us the file name, ie. ./ColumnA.vue
  // the code below, to register the component name is based on the above patterh
  // likely you will have to modify this
  Vue.component(key.slice(2).split('.')[0], () => context(key))
}

【讨论】：

谢谢，但是在组件中手动输入组件：违背了动态导入的目的
好吧，你总是必须在“vue”框架中注册它们。否则它将无法正常工作。不过，您可以在全局范围内注册组件。
@hitwill 提供了一个带有 require.context 的示例。注意根据路径调整逻辑以去除组件名称