抽象Vue公共組件詳解

本文主要介紹如何抽象化一個Vue公共組件，以一個數字鍵盤組件為例，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

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

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

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

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

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

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

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

App.vue

<template>
......
  <keyboard @submit-event=&#39;handleSubmit&#39; @change-event=&#39;handleChange&#39;></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=&#39;6&#39;></keyboard>

sp-key：自訂的特殊字符，如身分證輸入時的“X”，會新增到左下角空白格，預設為無。

<keyboard sp-key=&#39;X&#39;></keyboard>

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

<keyboard random=&#39;true&#39;></keyboard>

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

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

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

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

<template>
  <input type=&#39;text&#39; @focus=&#39;handleShowKeyboard($event)&#39; />
  <keyboard ref=&#39;kbref&#39;></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=&#39;kb-left&#39;>
      <p class=&#39;kb-item&#39; v-for=&#39;item in keyArr&#39;>{{item}}</p>
      <p class=&#39;kb-item kb-toggle&#39;></p> //键盘图标
    </p>
    <p class=&#39;kb-right&#39;>
      //...    
    </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=&#39;kb-left&#39;>
      <p @click=&#39;handleInput(item)&#39; class=&#39;kb-item&#39; v-for=&#39;item in keyArr&#39;>{{item}}</p>
      <p class=&#39;kb-item kb-toggle&#39;></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中文網其他相關文章！