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

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

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

导出默认值{
名称：“列”，
计算：{
列（）{
return（）=>import（`../columns/${this.$store.state.column}.vue`）；
},
}
};

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

导出默认值{
组成部分：{
ColumnA:（）=>导入（'../columns/ColumnA'），
ColumnB:（）=>导入（'../columns/ColumnB'），
ColumnC:（）=>导入（'../columns/ColumnC'），
ColumnD:（）=>导入（'../columns/ColumnD'），
}
}

接下来，您必须确保可以将状态映射到

列-a

，以匹配组件名称。如果是这种情况，您可以使用：

计算：{
第（）列{
返回此.store.state.column；
}
}

如果没有，则必须创建地图：

计算：{
第（）列{
常量mappedComponents={
myStateKeyForColumnA:“column-a”，
myStateKeyForColumnB:'column-b'，
myStateKeyForColumnC:'column-c'，
myStateKeyForColumnD:'column-d'，
}
返回mappedComponents[this.$store.state.column]；
}
}

编辑 要全局注册组件，可以使用

在main.js中

const context=require.context（'./path/to/columns'，true，/\.vue$/）
for（context.keys（）的常量键）{
//key为我们提供了文件名，即../ColumnA.vue
//下面的代码以上述模式为基础注册组件名称
//您可能必须修改此选项
Vue.component（key.slice（2）.split（'.'）[0]，（）=>context（key））
}

谢谢，但是在components中手动键入组件：无法实现导入dynamicallyWell的目的，您将始终必须在“vue”框架中注册它们。否则就不行了。您可以全局注册组件。@hit将提供一个带有require.context的示例。请小心调整逻辑，以便根据路径剥离组件名称