如何抽象乙個 Vue 公共元件

之前一直想寫一篇關於抽象 vue 元件的隨筆，無奈一直沒想到好的例子。恰巧最近為公司專案做了乙個數字鍵盤的元件，於是就以這個為例聊聊如何抽象 vue 的元件。

先上 demo 與原始碼。（demo最好在瀏覽器裡以手機模式瀏覽）

在講具體實現前，我想先分享下自己認為的理想的公用元件是什麼樣的：

1. 黑盒性，即除了你自己以外，其他的開發者在快速閱讀使用文件之後可以立刻上手，而不用關心你的內部實現；

2. 獨立性，即做好解耦，不與父元件有過多關聯；

3 自定義性，適當地暴露一些輸入介面或者方法給外部用於自定義，同時也要設定好這些屬性在外部未輸入時的預設值。

下面我們先以黑盒的方式看看 demo 中數字鍵盤元件是如何呼叫的（已省略非關鍵部分**）。

......

如上，最基本的呼叫就完成了。效果如下：

接著，點選 1-6 與「確定」。如果如下：

可以看到數字鍵盤已經如我們預期工作了，接下來分析下該數字鍵盤元件所有的輸入項。

@change-event

每一次點選數字按鍵以及退格鍵均會觸發該事件，其傳遞兩個引數：value，累積點選的字元組合；currentvalue，當前點選的字元。父元件通過 handlechange 方法接收該事件的**內容。

@submit-event：當點選「確定」鍵即會觸發該事件，其不傳遞引數，只是告訴父元件「我的確定按鈕被點選了，你要做什麼操作自己看著辦吧，之前點選的數字已經通過 change-event 傳給你了

」。父元件通過 handlesubmit 方法接收**。

如果只寫這兩個方法未免也太沒誠意了，我還根據一些場景編寫了以下幾個自定義屬性。

max：最大輸入長度，超過的部分將不會觸發 change-event 事件，預設無限制。

max='6'>

sp-key：自定義的特殊字元，如身份證輸入時的「x」，會新增到左下角空白格，預設無。

random：是否打亂數字順序，一些有關銀行賬戶或密碼的輸入經常會見到這種場景，預設 false。

從上面的幾個自定義屬性與事件，我們大概知道了父元件是如何向子元件傳值以及監聽子元件的變化，但父元件該如何直接呼叫子元件內部的函式呢？我們看下面這個場景。

數字鍵盤上的鍵盤圖示，點選之後會將數字鍵盤收起隱藏。元件內部擁有乙個方法 keyboardtoggle(true|false) 來控制鍵盤的彈起和收回，那麼如果在元件外部也想呼叫這個方法呢？比如當父元件中的 input 獲取到焦點時。

可以通過 vue 中的 ref 屬性來獲取到鍵盤的元件引用，從而呼叫其內部的方法，如下：

$refs.[refname].keyboardtoggle(true|false)

@focus='handleshowkeyboard($event)' />
ref='kbref'>

以上面這種形式便可以在父元件上下文中呼叫子元件內的方法。

$refs.[refname].handleinit()

數字鍵盤元件內部的初始化方法，用於重新渲染元件。若 random 屬性為 true，則數字鍵會重新整理隨機排列。

$refs.[refname].handleclear()

清除之前輸入的字元組合，並觸發 change-event 且返回空字串。

上面分享了這個元件所有對外的屬性與事件，可以發現我們並未看過該元件內部的一行**，但已經可以完整的使用它了，下面來聊聊內部實現。

首先來看看布局，我將鍵盤分為左右兩部分，右邊部分不用多說，左邊的部分是將乙個鍵位陣列通過 v-for 迴圈生成。

那麼是如何讓 0 和 9 之間空出一格呢，下面看下初始化鍵盤元件的方法。

keyboard.vue

handleinit()

for='item in keyarr'>}
//鍵盤圖示
//...

即在鍵位陣列倒數第二位插入乙個空字元，然後迴圈生成按鍵。下面看下自定義引數是如何生效的。

sp-key

在元件內部通過 props 屬性接收父元件傳遞的 spkey，之後就可在元件內的屬性和方法中通過 this.spkey 進行訪問。首先判斷 spkey 值是否有效，並代替空字元插入鍵位陣列倒數第二項。

random

將鍵位打亂順序其實也很簡單，只要通過陣列的 sort 方法。sort 方法可以接收乙個函式作為引數，若函式返回正數則交換前後兩項的位置，若函式返回負數則不作交換。所以將兩個隨機數相減的結果返回，即可將鍵位陣列隨機排序。

下面看看在元件內部是如何觸發 change-event 的。

handleinput()

for='item in keyarr'>}
//鍵盤圖示
//...

增加了 max 屬性後修改方法如下：

handleinput(value) 
this.inputstr +=value;
this.$emit('change-event', this
.inputstr, value);
}

最後看看退格刪除是如何實現的。

handledelete()

handledelete()

上面的例子都是些核心**的片段，並且其他輔助函式並未列出，想檢視完整的**請看原始碼。

感謝你的瀏覽，希望能有所幫助。

如何抽象乙個 Vue 公共元件

vue如何封裝乙個元件

如何寫乙個Vue元件

Vue 乙個元件引用另乙個元件

如何抽象乙個 Vue 公共元件

vue如何封裝乙個元件

如何寫乙個Vue元件

Vue 乙個元件引用另乙個元件

相關推薦