如何抽象一个Vue公共组件

<keyboard max='6'></keyboard>

sp-key：自定义的特殊字符，如身份证输入时的“X”，会添加到左下角空白格，默认无。

<keyboard sp-key='X'></keyboard>

random：是否打乱数字顺序，一些有关银行账户或密码的输入经常会见到这种场景，默认 false。

<keyboard random='true'></keyboard>

从上面的几个自定义属性与事件，我们大概知道了父组件是如何向子组件传值以及监听子组件的变化，但父组件该如何直接调用子组件内部的函数呢？我们看下面这个场景。

数字键盘上的键盘图标，点击之后会将数字键盘收起隐藏。组件内部拥有一个方法 keyboardToggle(true|false) 来控制键盘的弹起和收回，那么如果在组件外部也想调用这个方法呢？比如当父组件中的 input 获取到焦点时。

可以通过 Vue 中的 ref 属性来获取到键盘的组件引用，从而调用其内部的方法，如下：

$refs.[refName].keyboardToggle(true|false)

<template>
  <input type='text' @focus='handleShowKeyboard($event)' />
  <keyboard ref='kbref'></keyboard>
</template>
<script>
import keyboard from 'Keyboard';
export default {
  //...
  methods: {
    handleShowKeyboard(e) {
      e && e.preventDefault();
      this.$refs.kbref.keyboardToggle(true);
    }
  }
}
</script>

以上面这种形式便可以在父组件上下文中调用子组件内的方法。

$refs.[refName].handleInit()

数字键盘组件内部的初始化方法，用于重新渲染组件。若 random 属性为 true，则数字键会刷新随机排列。

$refs.[refName].handleClear()

清除之前输入的字符组合，并触发 change-event 且返回空字符串。

上面分享了这个组件所有对外的属性与事件，可以发现我们并未看过该组件内部的一行代码，但已经可以完整的使用它了，下面来聊聊内部实现。

首先来看看布局，我将键盘分为左右两部分，右边部分不用多说，左边的部分是将一个键位数组通过 v-for 循环生成。

那么是如何让 0 和 9 之间空出一格呢，下面看下初始化键盘组件的方法。