「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」
前言
市面上组件库很多，相信各位选的组件库都能满足大部分的日常需求，但偶尔呢，由于业务需要，我们需要对组件库进行二次封装，来添加一些业务代码，或是添加一些逻辑处理做更深程度的封装。今天我们来探讨一下二次封装。
需求
脱离需求，代码的意义不大，我们先看需求。
需求：我司用的后台管理系统的UI框架是element-UI, 这个管理后台有很多表单，表单的字段又非常的多，在实际开发过程中，开发常是复制黏贴，测试常常发现字段验证无效，或是保存时发现少了字段，有时候发现样式有兼容问题。现在需要解决这个问题。
思路
这个问题产生的原因是字段太多，开发都是复制黏贴，所以常忘改对应得prop、字段名，而且由于表单太长，代码也非常的长，错了一俩个拼写，基本看不出来，
这么一看，我们需要减少复制，并且让代码清晰，这样一想，我们可以采用配置来替代复制，json的可观性比html要好一些。
实现过程解析
首先我们需要保证每一个组件的方法和参数都还能用。
这点vue给我们提供 v-bind 批量绑定属性，v-on 批量绑定方法，而获取父组件的属性、方法，可以通过$prop, $listeners分别获取。
所以子继承父组件所有方法和属性的写法是：
<comp v-bind='$props' v-on="$listeners"></comp>
父传子有了，子传父，我们可以采用v-model来实现。
v-model, 原理网上讲烂了，这里不多说，我们注意一下model里面的配置，注意方法名和变量名。
export default {
model: {
prop: 'value',
event: 'input'
},
}
因为是要减少复制，那么就要对表单进行封装，但表单内用哪个组件，我们在封装的过程中是不知道的，但全用v-if 来判断就low了。幸好vue提供了component配合is，代码看起来好看多了
<component :is="schema.component" v-model="currentValue" v-bind="bindProps" v-on="schema.on" @change="setFormModel" clearable :size='size' class='w100'>
<template v-if='schema.component === "el-select"'>
<el-option
v-for="item in schema.componentProps.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</template>
<template v-else-if='schema.component === "el-radio-group"'>
<el-radio v-for="item in schema.componentProps.options"
:key="item.value"
:label="item.value"
>{{item.label}}</el-radio>
</template>
</component>
有了这三个，二次封装的基础就有了，来试试。
最终实现版
这里提供一个实现前文需求的完整例子：
