vue统一配置和大量重复代码的处理建议

我是vue的初学者，用这套框架学习起来非常棒！！！ 在学习本框架的vue前端的时候发现，页面代码中有大量重复的代码，例如每个页面都有getDataList，sizeChangeHandle等重复方法，el-table的属性:data，border在每个页面有都是重复的，这样做的话有2个方面的缺点： 1、增加的代码的复杂程度 2、维护成本比较高（如果要在在这些重复的代码中统一增加新功能，所有的地方都需要改） 做为初学者，我想到的方案是设计自己的基础组件，将重复的部分放入基础组件，将变化的部分放出来，例如我尝试做了一个基础的表格分页组件，使页面简化如下： （face[嘻嘻] PS：因为是初学vue，想法不够成熟，如果有更好的方案处理此类问题，请告知） <template> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button v-if="isAuth('generator:infojbxx:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('generator:infojbxx:delete')" type="danger" @click="delItem()" :disabled="selCount <= 0 ">批量删除</el-button> </el-form-item> </el-form> <basePaginationTable ref="chilTable" :listUrl="listUrl" :delUrl="delUrl" :dataForm="dataForm" @selcount="selcount" > <baseTableColumn type="selection" width="50"></baseTableColumn> <baseTableColumn prop="infoId" label="信息ID"></baseTableColumn> <baseTableColumn prop="xxbt" label="标题"></baseTableColumn> <baseTableColumn prop="xxnr" label="信息内容"></baseTableColumn> <baseTableColumn prop="xxlx" label="信息类型"></baseTableColumn> <baseTableColumn prop="czr" label="操作人"></baseTableColumn> <baseTableColumn prop="sxr" label="收信人"></baseTableColumn> <baseTableColumn prop="fssj" label="发信时间"></baseTableColumn> <baseTableColumn prop="dqzt" label="当前状态"></baseTableColumn> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.infoId)">修改</el-button> <el-button type="text" size="small" @click="delItem(scope.row.infoId)">删除</el-button> </template> </el-table-column> </basePaginationTable> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> </template> <script> import AddOrUpdate from './infojbxx-add-or-update' export default { // 数据 data () { return { addOrUpdateVisible: false, dataForm: { key: '' }, listUrl:"/generator/infojbxx/list", delUrl: "/generator/infojbxx/delete", selCount:0 } }, // 组件 components: { AddOrUpdate }, // 组件方法 methods: { getDataList(){ return this.$refs.chilTable.getDataList() }, delItem(id){ this.$refs.chilTable.deleteHandle(id) }, selcount(count){ this.selCount = count }, // 新增 / 修改 addOrUpdateHandle (id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) } } } </script>