Vue 多个组件在一个包/文件中答案

【问题标题】：Vue multiple components in one package/fileVue 多个组件在一个包/文件中
【发布时间】：2021-05-17 21:19:21
【问题描述】：

假设我要创建一个 UI 包，如何将多个组件放入一个 JS 文件中？

通常我会将不同的组件放在不同的文件中：

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

但我想将我所有的 Button 组件放在一个文件中，以实现可重用性等，以便我可以在需要时导入它们

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

我的 ButtonPackage.vue/.js 文件会是什么样子？

【问题讨论】：

我认为这不可能。我希望这是不可能的，因为这与首先拥有组件的一切背道而驰。您只想在脚本部分创建一个巨大的混乱，并且可能要滚动数千行代码。为什么？

标签： javascript vue.js vue-component node-modules

【解决方案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=14&hidenavigation=1&theme=dark

【讨论】：