缘由
现代开发中，Vue和React使用率已经算是很高了，那么这个过程中就会产生另外一个需求，UI组件库的使用，至少我了解的情况是：使用Vue开发的时候，一般我们都会搭配一个UI框架，Element-ui也好，iview也罢，终归是需要这么一个框架的。而ant-design在React开发过程中，出镜率也很高了。
以element-ui来说，我们应该怎样更高效的利用这些框架呢？
从框架本身来说，是提供给更多人更多项目来应用的，在某些场景下，他就必须提供更多的参数传递，以方便用户自定义某些属性。
然而我们在项目当中，有一点很清晰的是，可能一个组件，在这一整个项目中，所需要的参数基本上都是一致的，那么我们是否有必要在每一次使用组件过程中，传递一大堆非必要的参数呢？
那应该怎么用
以组件Input为例，查看官方文档其属性，有23个之多，比如说clearable，默认属性是false，然而如果我们在项目中，想提供这么个属性，我们是不是必须在每一个使用el-input的时候，都添加属性clearable="true"呢？
我是觉得很烦的。
所以这就需要我们在使用UI组件的之前，进行二次封装。
以前，我认为封装组件就是自定义的一些组件，从来没有想过对这些已经封装好的UI组件进行二次封装，真真是……
怎么封装？
直接上代码吧，还是Input。
<template>
<el-input
v-bind="$attrs"
v-on="$listeners"
:placeholder="placeholder"
v-model="current"
:clearable="clearable"
>
<template slot="prepend">
<slot name="prepend" />
</template>
<template slot="append">
<slot name="append" />
</template>
</el-input>
</template>
<script>
export default {
name: "VInput",
props: {
clearable: {
type: Boolean,
default: true
},
placeholder: {
type: String,
default: "请输入"
},
value: {
type: String,
default: ""
}
},
model: {
prop: "value",
event: "input"
},
data () {
return {
current: this.value
}
},
watch: {
value (val) {
this.current = val
}
}
}
</script>
发现什么了么？ 我明面上仅仅提供了两个props，clearable和placeholder，clearable主要是为了初始化其默认值为true，而placeholder一方面是提供初始值，另一方面确实占位字符多数情况下并不一样。
这里需要注意的点在哪里？
我们仅仅提供了两个props，那如果在某些场景下有特殊需求，是不是我们还得在回来改一下参数？
然而，并不是。
我们在模板当中，提供了v-bind="$attrs"和v-on="$listeners",一个是绑定所有props，一个是监听所有事件，是不是并不麻烦。
后面我们就可以在项目当中，任何一个地方使用组件v-input，他都是默认可以clearable的，如果你想自定义更多的属性，当然也可以，也就是添加几个props罢了。
当然，如果你想修改监听的事件，也是可以的，比如input组件默认监听input事件，你可以通过修改
model: {
prop: "value",
event: "change"
}
变成监听input组件的change事件。
这个例子仅仅是修改了一个默认属性，有时候未必能看出来多简便。
我们可以自己尝试一下类似于Select，DatePicker之类的更复杂一点的组件，也许我们就会感受到到底能节省多少字符了。
动手尝试一下吧！