将所有离子组件导入 Ionic-Vue 视图答案

【问题标题】：Import all ionic components into a Ionic-Vue view将所有离子组件导入 Ionic-Vue 视图
【发布时间】：2021-03-18 00:12:54
【问题描述】：

我正在构建一个 Ionic-Vue 5 移动应用程序，我发现自己导入了很多 vue 组件只是为了在我的视图中使用它们：

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonInput,
  IonButton,
  IonAlert,
  IonList,
  IonItem,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonLabel,
  IonSpinner
} from "@ionic/vue";

export default defineComponent({
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonInput,
    IonButton,
    IonAlert,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonLabel,
    IonSpinner
  },

我知道从性能的角度来看这可能很有用，但是有一种方法可以在列表足够大时一次导入所有 ionic 组件以证明一点性能损失是合理的，以便大大简化代码？

【问题讨论】：

我也想这样做，因为导入 100 多个组件简直太荒谬了！我正在考虑创建一个只包含每个组件的 mixin。您找到更好的解决方案了吗？

标签： vue.js ionic-framework ionic-vue

【解决方案1】：

在main.js（或您创建 Vue 应用的任何地方）：

import * as IonComponents from '@ionic/vue';

Object.keys(IonComponents).forEach(key => {
    if (/^Ion[A-Z]\w+$/.test(key)) {
        app.component(key, IonComponents[key]);
    }
});

如果是在您创建 Vue 应用程序之前，只需将 Vue.component(…) 替换为 app.component(…)。

正则表达式确保只有组件被注册为组件，它们都以 Ion 开头。该导入中的其他项主要是函数，您需要在需要时导入它们。

【讨论】：

【解决方案2】：

初始化app 变量后，您始终可以在main.js 中执行类似app.component('ion-app', IonApp) 的操作。

通过这样做，您基本上将所有组件导入一次，并使其可用于所有组件。

现在您可以直接在模板中使用<ion-app>...</ion-app>，而无需每次都导入离子组件。

【讨论】：