Vue中动态渲染组件

 <script>
    // 动态渲染组件
    //第一个参数：填写一个路径，想检索哪个路径
    //第二个参数：布尔值，是否深度匹配（深度匹配会把文件夹的名字也带上）
    //第三个参数：正则表达式，想检索哪种文件
    //返回值是一个对象也是一个方法可以调用，对象里边包含了检索到的所有文件名字，可以通过字符串的slice和replace操作得到自己想要的字符串
    const ctx=require.context('./components',true,/\.vue$/);
    console.log(ctx);
    // component组件也可以渲染组件，is属性可以是一个注册了的组件（要写字符串），也可以直接写配置对象
    <component is='comp'></component>
    let obj={};
    ctx.keys().forEach(path=>{
        let compName=path.slice(2,-4);
        obj[compName]=ctx(path).default; //ctx('./list.vue').default可以得到组件的配置对象
    });
    // 完整版如下
    computed:{
      allComp(){
        const ctx=require.context('./components',false,/\.vue$/);
        let obj={};
        ctx.keys().forEach(path=>{
          let compName=path.slice(2,-4);
          obj[compName]=ctx(path).default;
        });
        return obj
      };
    }
​
    // 组件内模块代码
    <component v-for="(item,index) in allComp" :key="index" :is="item"></component>
  </script>