vue組件開發——基礎

組件化開發緣由

前端組件化開發始於200X年，前端開發離不開HTML/CSS/JS，早期開發以頁面爲開發單位，三種語言各有特色，早期缺少固定規範，沒有約束，野蠻開發。開發完時，前端開發者和上帝知道寫的代碼是什麼意思；過了一個月後，就只有上帝知道這段代碼什麼意思。

隨以前端組件這個概念逐漸在開發者腦海中生成，從早期的YUI、ExtJS再到web components，隨着三大框架的出現，組件化開發開始家喻戶曉，組件做爲基本的抽象單元。React橫空出世，讓人們知道組件能夠是函數，突破了人們原來基於頁面的理解，經過將經常使用邏輯功能抽象成各類組件，方便開發時調用，測試，減小前端邏輯和ui的耦合等。

現階段比較火的組件庫，好比說antd系列以及elementui等，都是面向中後臺系統開發出來的，由於中後臺系統的功能相對來講比較固定，UI樣式要求並不複雜，能夠在以往的業務邏輯中總結出一些經常使用的組件，將這些組件開發出來，方便中後臺系統的開發。

組件分類

組件能夠分爲四類：

1.純展現類組件

這類組件能夠是一個list或者是一個table，主要承擔向用戶展現服務端數據的功能。傳入數據，組件渲染生成對應DOM。

2.接入型組件（與服務端交互）

例子：vue-router中配置掛載的vue組件，承擔者和服務端獲取、發送數據這樣的功能，而後再一層一層傳遞給純展現類組件。

3.交互型組件

例子：表單組件，時間日期選擇組件等，包含比較複雜的用戶交互邏輯，一種比較通用的邏輯，強調複用。

4.功能型組件

抽象化的，提供某些抽象功能。vue-router中的router-view和transation組件。自己不渲染任何內容，做爲一種擴展抽象機制的邏輯型組件存在

vue組件開發API

組件的兩個基礎就是props和event。

props：經過父組件傳遞props進來，簡單組件能夠將props轉化成virtual DOM 最後再渲染成DOM，展示給用戶。

event：組件須要支持除了瀏覽器原生事件以外，還須要支持一些組件的自定義事件，來支持UI交互功能。

slot：在如今三大框架下的組件，其實組件都是函數的概念，僅僅由props和event這樣兩個API只能開發一些簡單的組件，開發複雜一些的組件還須要進一步的API支持，react中能夠直接使用props去繼承，而因爲vue是SFC模式的，因此vue提供了slot這一API去彌補template在這一場景下的不足。

綜上，vue組件開發離不開的三大API就是props、event、slot。

props

這裏給出iview做者的一個簡易button的例子

<template>
  <button
    :class="'i-button-size' + size"
    @click="handleClick"
    :disabled="disabled"
  >
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>
<script>
// 判斷參數是不是其中之一
function oneOf(value, validList) {
  for (let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true;
    }
  }
  return false;
}

export default {
  inheritAttrs: false,
  props: {
    size: {
      validator(value) {
        return oneOf(value, ["small", "large", "default"]);
      },
      default: "default",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  created: function () {
    console.log(this.$attrs); //注意這裏
  },
  methods: {
    handleClick(evt) {
      this.$emit("click", evt);
    },
  },
};
</script>

複製代碼

這裏須要注意幾點

1.開發組件須要指定props的類型，可能的話設定默認值，以及添加validator函數，進行參數校驗，提高組件的穩定性。

2.經過inheritAttrs: false和 $attrs，咱們能夠手動控制除了props以外的attribute具體怎麼繼承。須要注意的是inheritAttrs: false並不能影響style和class的繼承

event

不一樣於組件和props，事件的命名大小寫敏感，而且推薦使用kebab-case的命名方式

以button組件中的點擊事件爲例子，有兩種方式添加一個點擊事件。

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick (event) {
        this.$emit('on-click', event);
      }
    }
  }
</script>
複製代碼

經過 $emit，就能夠觸發自定義的事件 on-click ，在父級經過@on-click來監聽

<i-button @on-click="handleClick"></i-button>
複製代碼

直接在父級聲明，但爲了區分原生事件和自定義事件，要用到事件修飾符 .native

<i-button @click.native="handleClick"></i-button>
複製代碼

這裏再給出筆者寫的一個簡單版本的input組件

<template>
  <div class="fr-input" :class="[inputSize?'fr-input--' + inputSize:'']">
    <input
      class="fr-input__inner"
      :class="[inputSize?'fr-input__inner-'+inputSize:'']"
      :readonly="readonly"
      :value="value"
      @input="handleInput"
      @focus="handleFocus"
      v-bind="$attrs"
      autocomplete="off"
    />
  </div>
</template>
<script>
export default {
  name: 'FrInput',
  props: {
    value: [String, Number],
    readonly: Boolean,
    size: {
      type: String
    }
  },
  data() {
    return {
      focused: false
    }
  },
  computed: {
    inputSize() {
      return this.size
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value)
    },
    handleFocus(event) {
      this.focused = true
      this.$emit('focus', event)
    }
  }
}
</script>
複製代碼

具體使用

<fr-input
    v-model="phoneNumber"
    type="text"
    name="name"
    spellcheck="false"
    placeholder="請輸入手機號"
    class="input"
    size="mform100"
  ></fr-input>
複製代碼

這裏須要注意:value="value"@input="handleInput"其實就是v-model="value"的語法糖，在vue2.2版本以上後，可使用model選項來定製prop和event

slot

在props中給出的button組件例子中，若是想在父組件中添加一些文字內容， 這裏使用了slot的默認插槽還有slot="icon"的具名插槽，插槽能夠極大程度的擴展組件的功能。

<i-button>
  <i-icon slot="icon" type="checkmark"></i-icon>
  按鈕 1
</i-button>
複製代碼

本文簡單介紹了一些組件化開發的概念、緣由以及vue組件化開發的相關API具體使用。接下來會進行一些更深刻的學習。