VUE2组件按需引用

<script>

const files = require.context('../../components/Dialog', true, /.vue/)
const modules = {}
files.keys().forEach(key => {
  const name = key.replace(/(\.\/|\.vue)/g, '')
  modules[name] = files(key).default || files(key)
})

引入Dialog这个文件夹下面的组件，路径写正确；直接放到script下面就行，modules不用在components注册，因为上面定义了；

console.log(modules),打印出来的是一个对象，Dialog下面所有组件组成的对象

如果要用的话，就是打开想要的那个组件，一定要查找的组件一致的名字

modules[‘匹配的名字’]

比如一个组件叫asd.vue

展示的就是modules['asd']

下面是我的使用，仅供参考

html部分

  <el-dialog :visible.sync="open" :show-close="false" width="82%" destroy-on-close v-if="isShow"
        :before-close="closeDialog" v-loading="loading">
        <component :is="gytFlag" />
      </el-dialog>

我是放到一个弹出层了，

然后js先引用，点击组件的那个方法

  async gyt(val) {
   
      if (val.gytFlag != null) {
        this.gytFlag = modules[val.gytFlag];//校对！要匹配的上！你传过来的val.gytFlag去咱刚刚引入的组件modules里面查找，匹配的上的赋值给this.gytFlag，然后就能在上面展示出来了，我这里名字起的重复了
        // this.port(val.gytFlag);
        this.$nextTick(() => {
          this.isShow = true;
          this.open = true;
        });
      } else {
        this.$message({
          message: "=",
          type: "warning",
        });
      }
      this.loading = false;
    },