Vue 批量注册局部组件及应用
zhuxiaoqiang · 221浏览 · 发布于2021-04-30
实际工作中,可能会遇到一个大页面里面有很多个模块,这些模块一般是需要拆分到单独的组件中,然后父组件再引入
我最近就遇到一个可以拆分成 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 依次用 v-for 循环应用
如果每个组件的位置不是排列在一起的(中间穿插其它内容),那就单独一个个写吧,也不用做排序
<template> <div class="krry-appointment"> <create-header :active="active" :translate="translate"></create-header> <div class="form-content"> <component v-for="ele in componentList" :dataSource="dataSource" :key="ele" :is="ele" ></component> </div> </div> </template>
这样就大功告成,是不是简化了很多代码~
温馨提示:如果在上面 v-for 循环的 component 定义 ref,那么此 $refs 将会是一个数组
<component ref="formModules" v-for="ele in componentList" :dataSource="dataSource" :key="ele" :is="ele" ></component>
this.$refs.formModules.forEach(ele => { // TODO // 处理每个子组件(ele) })
相关推荐
RN开发环境的npm私库本地debug调试
manongba · 698浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理
追忆似水年华 · 1373浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式
追忆似水年华 · 999浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取
manongba · 717浏览 · 2019-06-10 09:16:16
浏览器关闭后,Session会话结束了么?
追忆似水年华 · 906浏览 · 2019-06-13 09:39:50
我爱编程,我爱工作,更爱生活
分类专栏
最新发布
最热排行
0评论