Question

我在nuxt.js中有一个components文件夹

/components/atoms/

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

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

const components = {}

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
  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

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

安装

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

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

3 个答案:

Weback Plugin - named-exports