如何使用动态名称导出变量

Question

我在 nuxt.js

中有一个组件文件夹

/components/atoms/

在该文件夹中我有一个 index.js 可以动态导出所有组件

const req = require.context('./', true, /\.vue$/)

const components = {}

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '')
  components[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead, InputSearch } = components

这样我就可以完美导入了

import { ButtonStyled } from "@/components/atoms"

问题是我正在定义要静态导出的变量，固定的，所以对于每个创建的组件，我需要手动添加另一个变量

我需要动态导出变量名

示例：

DynamicCreation = ['ButtonStyled', 'TextLead', 'InputSearch']

export const { DynamicCreation } = components 

// output -> export const { ButtonStyled, TextLead,InputSearch  } = components

我需要导出已经非结构化变量的名称

注意：我不能使用这个 export default components 因为我不能像这样导入 import { ButtonStyled } from "@/components/atoms"

Answer 1

你应该可以这样做：

export default components

然后在您要使用组件的文件中：

import * as components from '@/components/atoms'

然后当你需要使用你的Vue文件中的组件时，你需要映射它们：

@Component({
  components: {
    ButtonStyled: components.ButtonStyled
  }
})

现在你有：

<ButtonStyled></ButtonStyled>

Answer 2

你可以这样制作，看看是不是你需要的。

创建文件以导入组件的组合：allComponents.js

export default {
 componentOne: require('./passToOneComponent.js');
 componentTwo: require('./passToOneComponent.js');
 componentThree: require('./passToOneComponent.js');
}

在 index.js 中导出带有您想要的名称的 allComponents.js：

export {default as SomeName } from 'allComponents.js';

因此在最终文件中，您可以制作如下内容：

import { SomeName } from 'index.js';

SomeName.componentOne();

Answer 3

我创建了一个执行此类导出的库，任何想要的人都可以通过 npm

安装

我创建了一个 Webpack 插件，可以从组件中进行命名导出，也许这对其他人有帮助

如何使用动态名称导出变量

How to Export Variables with a Dynamic Names

javascript

node.js

vue.js

atomic-design

nuxt.js

Weback Plugin - named-exports