vueにおける一括コンポーネントのグローバルおよびローカル導入方法

前言:Dalinは開発時にダイナミックコンポーネントを使用していますが、切り替えが必要なコンポーネントが多すぎて、どのような切り替えが必要なコンポーネントがあるのか分からないため、importを使って一つ一つ導入するのは望ましくありません.公式サイトでコンポーネントを大量に導入する方法を提供していると思うと、やはり便利で効率的です.
一、グローバル一括導入
作成します.jsファイル、main.jsに導入すればよい.
(このように導入されたコンポーネントはグローバルコンポーネントとなり、直接使用できます.不要なコンポーネントの導入を避けるために、自分のニーズに応じてフィルタリングを行うことができます.)

import Vue from "vue"
import upperFirst from "lodash/upperFirst"
import camelCase from "lodash/camelCase"
const requireComponent = require.context(
    './', //           
    false, //        
    /Base[A-Z]\w+\.(vue|js)$/ //               
)
requireComponent.keys().forEach(fileName=>{
    //      
    var names = fileName.split("/").pop().replace(/\.\w+$/,"");//BaseBtn
    //       
    const componentConfig = requireComponent(fileName);
    //        "export default"   ，    ".default"，
    //            
    Vue.component(names,componentConfig.default || componentConfig);
})

二、局部ロット導入
(この.vueファイルにこれらのコンポーネントが導入されていることに相当し、他のページを使用するには再導入する必要があります.)

//            
const requireComponent = require.context(
  "./", //           
  true, //        
  /\w+\.vue$/ //               
);
var comObj = {};
requireComponent.keys().forEach(fileName => {
  //      
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  //       
  const componentConfig = requireComponent(fileName);
  //        "export default"   ，    ".default"，           
  comObj[names] = componentConfig.default || componentConfig;
});
export default {
  data() {
    return {
        isWhich: ""
    }
  },
  mounted() {},
  components: comObj
};

三、ダイナミックコンポーネントの使用方法

ラベルを使用してステータスを保存します.つまり、切り替えコンポーネントが再び戻ってきても元のままで、ページはリフレッシュされません.必要でなければ削除できます.
イベントによってisバインドのisWhich値を変更すると、異なるコンポーネントに切り替えることができます.isWhichの値はコンポーネント名です.