Как экспортировать переменные с динамическими именами - PullRequest
Новая
       38

Как экспортировать переменные с динамическими именами

0 голосов
/ 25 апреля 2019

У меня есть папка компонентов в nuxt.js 

/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"

Ответы [ 3 ]

0 голосов
/ 26 апреля 2019

Вы можете сделать что-то вроде этого, проверьте, что вам нужно.

Создайте файл для импорта набора компонентов: 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();
0 голосов
/ 09 июля 2019

Я создал библиотеку, которая выполняет этот тип экспорта, любой желающий может установить через npm

Я создал плагин Webpack, который делает именованные экспорты из компонента, возможно, это поможет другим людям

Плагин Weback - именованный экспорт

0 голосов
/ 26 апреля 2019

Вы должны быть в состоянии сделать это так: 

export default components

Тогда в вашем файле, где вы хотите использовать компоненты: 

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

Тогда, когда вам нужно использовать компоненты в ваших файлах Vue, вам нужно отобразить их: 

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

А теперь у вас есть: 

<ButtonStyled></ButtonStyled>
...