上一篇介绍了，如果传递原生的组件的各种功能，但是这只是如何确保原汁原味，而不是最终目标。
因为如果只是传声筒，而没有其他功能的话，那么直接用原生的不香吗？干嘛还要找个传声筒？
所以我们要明确封装组件的目标！
目标
当然是发现不爽的地方，然后自己动手丰衣足食。各种UI库的侧重点是——可以满足各种需求，要灵活，放弃了一些便捷性。
那么我们就可以反着来。牺牲一定的灵活性，来满足某一方面的便捷性的需求。
简化编码
直接使用要写好多，封装一下就可以简单许多。
比如用el-input做个密码框，原生方式：
<el-input v-model="input" show-password></el-input>
封装后
<nfpwd v-model="formModel.pwd"/>
当然这个差别不大。
再来看一下URL的输入框，官网例子
<el-input
placeholder="请输入内容"
v-model="input3"
class="input-with-select"
>
<template #prepend>
<el-select v-model="select" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
</template>
<template #append>
<el-button icon="el-icon-search"></el-button>
</template>
</el-input>
</div>
官网url
封装后
<nfurl v-model="formModel.url"/>
效果：
封装URL
封装URL
这个差别就大了吧。而且功能也更丰富。前面可以选择 http 或者 https ，后面可以选择常用的域名后缀。
表单里需要的各种组件，封装之后都是一行标签搞定，这样做表单就可以方便多了。
快速开发
需要的代码少了，开发的速度自然就快了。有更新需求，也不用到处改代码，改封装的代码就可以了。
依赖配置
相同的写成函数，不同的放在配置里面。这样代码可以更少，最后就是一套代码可以实现n套功能。
统一接口
接口统一了才好做遍历。比如表单的 item 可以用 v-for 了，这样代码可以更少。
目标很淳朴。能少写代码就少写代码。又不是打字员。。。
