之前一直想写一篇关于抽象 Vue 组件的随笔，无奈一直没想到好的例子。恰巧最近为公司项目做了一个数字键盘的组件，于是就以这个为例聊聊如何抽象 Vue 的组件。
先上 Demo 与 源码。（demo最好在浏览器里以手机模式浏览）
在讲具体实现前，我想先分享下自己认为的理想的公用组件是什么样的：
1. 黑盒性，即除了你自己以外，其他的开发者在快速阅读使用文档之后可以立刻上手，而不用关心你的内部实现；
2. 独立性，即做好解耦，不与父组件有过多关联；
3 自定义性，适当地暴露一些输入接口或者方法给外部用于自定义，同时也要设置好这些属性在外部未输入时的默认值。
下面我们先以黑盒的方式看看 demo 中数字键盘组件是如何调用的（已省略非关键部分代码）。
App.vue
<template>
......
<keyboard @submit-event='handleSubmit' @change-event='handleChange'></keyboard>
</template>
<script>
import keyboard from 'Keyboard.vue';
export default {
data() {
return {
value: ''
};
},
methods: {
handleChange(value, currentValue) {
console.log(value, currentValue);
this.value = value;
},
handleSubmit() {
console.log('submit: ' + this.value);
}
}
}
</script>
如上，最基本的调用就完成了。效果如下：
接着，点击 1-6 与“确定”。如果如下：
可以看到数字键盘已经如我们预期工作了，接下来分析下该数字键盘组件所有的输入项。
@change-event：该事件为自定义事件，父组件通过 v-on 注册监听，子组件内部通过 $emit 进行触发（更多自定义事件相关内容请参考：Vue官方教程）。
每一次点击数字按键以及退格键均会触发该事件，其传递两个参数：value，累积点击的字符组合；currentValue，当前点击的字符。父组件通过 handleChange 方法接收该事件的回调内容。
@submit-event：当点击“确定”键即会触发该事件，其不传递参数，只是告诉父组件“我的确定按钮被点击了，你要做什么操作自己看着办吧，之前点击的数字已经通过 change-event 传给你了”。父组件通过 handleSubmit 方法接收回调。
如果只写这两个方法未免也太没诚意了，我还根据一些场景编写了以下几个自定义属性。
max：最大输入长度，超过的部分将不会触发 change-event 事件，默认无限制。
