Vue でコンポーネントを一括インポート、登録、使用する方法

	'components/A' から A をインポートします
	'components/B' から B をインポートします
	'components/C' から C をインポートします
	'components/D' から D をインポートします

<テンプレート>
  <div class="水分析">
    <div class="content-box" ref="contentbox">
      <a-tabs:default-active-key="activeComponent" @change="tabChangeHandle">
        <タブペイン
          v-for="tabList 内の項目"
          :key="アイテムキー"
          :tab="アイテム.タブ"
        </タブペイン>
      </a-タブ>
      <div class="タブペインボックス">
      	<!-- is 属性を通じて、対応するコンポーネント名をバインドし、対応するコンポーネントを表示します-->
        <コンポーネント:is="アクティブコンポーネント"></コンポーネント>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
// 中央の水平線をキャメルケースに変換します var camelCase = function (s) {
  s.replace(/-\w/g, 関数(x) {を返す
    x.slice(1).toUpperCase() を返します。
  });
};
// サブコンポーネントをバッチでインポートします。上記の構文を参照してください。const allComponents = require.context("./comp", false, /\.vue$/);

コンソールログ(allComponents.keys())
// ["./tem-a.vue", "./tem-b.vue", "./tem-c.vue", "./tem-d.vue"]

コンソールログ(allComponents.id)
//./src/views/tempManage/comp 同期 \.vue$

// コンポーネント配列を作成し、以下のコンポーネントに登録します。let resComponents = {};
allComponents.keys().forEach(comName => {
  name = camelCase(comName); とします。
  const comp = allComponents(comName);
  resComponents[name.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});

エクスポートデフォルト{
  名前: "WaterQuery",
  コンポーネント: resComponents、
  データ（） {
    戻る {
      アクティブコンポーネント: "temA",
      タブリスト: [
        {
          キー: "temA",
          タブ:「コンポーネントA」、
        },
        {
          キー: "temB"、
          タブ:「Bコンポーネント」、
        },
        {
          キー: "temC",
          タブ: 「C コンポーネント」、
        },
        {
          キー: "temD",
          タブ:「Dコンポーネント」、
        },
      ]、
    };
  },
  作成された() {
    if (this.$route.query["val"]) {
      this.activeComponent = this.$route.query["val"];
    }
  },
  メソッド: {
    // タブバーを切り替える tabChangeHandle(val) {
      const {path} = this.$router;

      this.$router.push({
        パス、
        クエリ: {val},
      });
      this.activeComponent = val;
    },
  },
};
</スクリプト>

<スタイルスコープ>
.水分析{
  高さ: 100%;
  オーバーフロー:自動;
}
.コンテンツボックス{
  高さ: 100%;
}
.タブペインボックス{
  高さ: calc(100% - 62px);
}
</スタイル>