vue3 循环遍历引入文件夹下的多个组件

假如有这样一个文件夹，下面的组件都需要引入到页面上，并控制他的显示隐藏

我们不想在页面上这样去重复去引入、罗列

那就想想办法吧~

一、新建queryFunc.js文件（把某个（components）文件夹下的文件都引入）
有两种写法，大家自行选择

第一种方法
const utilFuns = {};
 const files = import.meta.globEager('./components/*.vue');
 Object.keys(files).forEach((fileName) => {
  const name = fileName.replace(/\.\/|\.ts/g, '');
 utilFuns[name] = files[fileName].default;
 });
 export default utilFuns;

第二种方法
const modulesFiles = import.meta.globEager('./components/*.vue');
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  const value = modulesFiles[modulePath];
  modules[moduleName] = value.default;
  return modules;
}, {});

export default modules;

需要注意的是如果构建工具用的vite，使用import.meta.globEager，不然会报错

import.meta.globEager('./components/*.vue')

如果构建工具用的webpack, import.meta.globEager可替换为

require.context('./components', true, /\.vue$/);

二、父组件中
我这里用的是vue3 setup写法，没法注册组件，所以转换了一下变成数组

<script lang="ts" setup>
  import queryFunc from './queryFunc';
  let components = Object.values({ ...queryFunc });
</script>

如果是vue2注册组件的话可写成这样吧

components: {...queryFunc }

三、template中使用组件

	//item.__name为组件名称
     <div v-for="item in components" :key="item.__name">
          <template v-if="item.__name == 'form' + active.toString()">
            <component :is="item" :formInfo="formInfo" />
          </template>
     </div>

本来可以直接循环component的，但是编辑器提示说v-if不能用于component组件上，就加了一层template，然后呢，又说key不能写到template上，就又加了一层div，这就是最终写法啦