本文主要介紹如何抽象化一個Vue公共組件，以一個數字鍵盤組件為例，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。
之前一直想寫一篇關於抽象 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 事件，預設為無限制。
<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 之間空出一格呢，下面看下初始化鍵盤元件的方法。
keyboard.vue
handleInit()
<template>
<p>
<p class='kb-left'>
<p class='kb-item' v-for='item in keyArr'>{{item}}</p>
<p class='kb-item kb-toggle'></p> //键盘图标
</p>
<p class='kb-right'>
//...
</p>
</p>
</template>
<script>
export default {
data() {
return {
baseArr: []
}
},
computed: {
keyArr() {
this.handleInit();
return this.baseArr;
}
},
methods: {
handleInit() {
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
this.baseArr.splice(this.baseArr.length - 1, 0, '');
}
}
}
</script>登入後複製
即在鍵位數組倒數第二位插入一個空字符，然後循環產生按鍵。下面看下自訂參數是如何生效的。
sp-key
<script>
export default {
props: ['spKey'],
data() {
return {
baseArr: []
}
},
//....
methods: {
handleInit() {
let spKey = this.spKey;
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
}
}
}
</script>登入後複製
在组件内部通过 props 属性接收父组件传递的 spKey，之后就可在组件内的属性和方法中通过 this.spKey 进行访问。首先判断 spKey 值是否有效，并代替空字符插入键位数组倒数第二项。
random
<script>
export default {
props: ['spKey', 'random'],
data() {
return {
baseArr: []
}
},
//....
methods: {
handleInit() {
let spKey = this.spKey;
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
if (this.random && this.random != 'false') {
this.baseArr.sort(function() {
return Math.random() - Math.random();
});
}
this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
}
}
}
</script>登入後複製
将键位打乱顺序其实也很简单，只要通过数组的 sort 方法。sort 方法可以接收一个函数作为参数，若函数返回正数则交换前后两项的位置，若函数返回负数则不作交换。所以将两个随机数相减的结果返回，即可将键位数组随机排序。
下面看看在组件内部是如何触发 change-event 的。
handleInput()
<template>
<p>
<p class='kb-left'>
<p @click='handleInput(item)' class='kb-item' v-for='item in keyArr'>{{item}}</p>
<p class='kb-item kb-toggle'></p> //键盘图标
</p>
//...
</p>
</template>
<script>
export default {
data() {
return {
inputStr: ''
}
},
//...
methods: {
handleInput(value) {
this.inputStr += value;
this.$emit('change-event', this.inputStr, value);
}
}
}
</script>登入後複製
增加了 max 属性后修改方法如下：
handleInput(value) {
let max = Number(this.max);
if (!isNaN(max) && this.inputStr.length+1 > max) {
return;
}
this.inputStr += value;
this.$emit('change-event', this.inputStr, value);
}登入後複製
最后看看退格删除是如何实现的。
handleDelete()
handleDelete() {
let str = this.inputStr;
if (!str.length) return;
this.inputStr = str.substring(0, str.length - 1);
this.$emit('change-event', this.inputStr);
}登入後複製
上面的例子都是些核心代码的片段，并且其他辅助函数并未列出，想查看完整的代码请看源码。
相关推荐：
微信小程序公共组件的封装制作方式
Vue组件之Tooltip实例详解
Vue高阶组件的使用方法
以上是抽象Vue公共組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
