博客地址：https://ainyi.com/105
批量注册路由的有个博客说到：https://ainyi.com/77
实际工作中，可能会遇到一个大页面里面有很多个模块，这些模块一般是需要拆分到单独的组件中，然后父组件再引入
我最近就遇到一个可以拆分成 10 个模块的大表单页面，拆分成局部组件后还是得一个个导入、声明，最后在 template 应用。作为一个程序员，我们怎么能写这么一大段重复的代码呢啊哈哈哈哈
所以就来搞搞局部组件批量注册和批量应用吧
如图，一个 Index.vue 文件中需要引入 modules 里面 10 个子组件
注册先扫描读取目录下每个文件，如有需要过滤的组件标出，再批量注册
const requireComponent = require.context('./modules', false, /\w+\.(vue|js)$/) const cmps = {} // 这里我把 CreateHeader 组件排除，单独引入 const filterCmps = ['./CreateHeader.vue'] requireComponent.keys().forEach(fileName => { let cmp = requireComponent(fileName).default !filterCmps.includes(fileName) && (cmps[cmp.name] = cmp) }) export default { components: { createHeader: () => import('./modules/CreateHeader'), ...cmps }, data() { return { // 这里做了排序处理，每个组件的 name 命名为 xxx_${index} componentList: Object.keys(cmps).sort( (a, b) => a.split('_')[1] - b.split('_')[1] ) } } } 应用template 应用手写每个组件也几乎不可能了，太多了
上面 componentList 做了排序处理，按照原型图的顺序命名组件的 name：xxx_${index}
有顺序了，这里就可以使用 component、is 依次循环应用
如果每个组件的位置不是排列在一起的，那就单独一个个写吧
<template> <div> <create-header :active="active" :translate="translate"></create-header> <div> <component v-for="ele in componentList" :key="ele" :is="ele"></component> </div> </div> </template>这样就大功告成，是不是简化了很多代码~
博客地址：https://ainyi.com/105