Блог

Главная - Вопросы по программированию - Vue несколько компонентов в одном пакете / файле

Vue несколько компонентов в одном пакете / файле

#javascript #vue.js #vue-component #node-modules

#javascript #vue.js #vue-компонент #узлы-модули

Вопрос:

допустим, я хочу создать пакет пользовательского интерфейса, как я могу поместить несколько компонентов в один JS-файл?

Обычно у меня были бы разные компоненты в разных файлах:

 import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'

но я хочу поместить все мои компоненты кнопок в один файл для повторного использования и т. Д., Чтобы я мог импортировать вещи, когда они мне понадобятся

 import {ButtonText, ButtonIcon, ButtonLayout } from '../ButtonPackage.vue'

как бы мой ButtonPackage.vue/.js Как выглядит файл?

Комментарии:

1. Я не думаю, что это возможно. Я надеюсь, что это невозможно, потому что это противоречит всему, что касается наличия компонентов в первую очередь. Вы просто хотите создать огромный беспорядок в разделе скриптов и, вероятно, несколько тысяч строк кода для прокрутки. Почему?

Ответ №1:

В ButtonPackage.js файл вы импортируете все компоненты и экспортируете их как объект.

 import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'

export {ButtonText, ButtonIcon, ButtonLayout }

Затем в компоненте вы импортируете их по мере необходимости:

 import { ButtonText } from '../ButtonPackage.js'

Ответ №2:

Ключ в том, чтобы экспортировать все компоненты в один файл:

 import ButtonText from "./ButtonText";
import ButtonIcon from "./ButtonIcon";
import ButtonLayout from "./ButtonLayout";
export { ButtonText, ButtonIcon, ButtonLayout };

Поэтому, когда вы хотите использовать любой из них:

 import {
  ButtonText,
  ButtonIcon,
  ButtonLayout,
} from "./components/ButtonPackage";

Вот демо, которое я создал:

https://codesandbox.io/s/crazy-oskar-gper1?fontsize=14amp;hidenavigation=1amp;theme=dark