Vue元件化開發

海因斯坦發表於2019-06-06
Vue元件化

Vue的元件化

元件化是Vue的精髓，Vue就是由一個一個的元件構成的。Vue的元件化設計到的內容又非常多，當在面試時，被問到：談一下你對Vue元件化的理解。這時候又有可能無從下手，因此在這裡闡釋一下個人對Vue的元件化的理解。

元件的分類

一般來說，元件大致可以分為三類：

  1. 頁面級別的元件。
  2. 業務上可複用的基礎元件。
  3. 與業務無關的獨立元件。

頁面級別的元件

頁面級別的元件，通常是pages目錄下的.vue元件，是組成整個專案的一個大的頁面。一般不會有對外的介面。我們通常開發時，主要就是編寫這種元件。如下所示：pages下面的Home.vue(主頁)和About.vue(關於我們)等都是一個獨立的頁面，也是一個獨立的元件。

  pages
  ├─ About.vue
  └─ Home.vue

業務上可複用的基礎元件

這一類元件通常是在業務中被各個頁面複用的元件，這一類元件通常都寫到components目錄下，然後通過import在各個頁面中使用。這一類元件通常是實現某個功能，比如外賣中各個頁面都會使用到的評分系統。這個部分就可以實現評分功能，可以寫成一個獨立的業務元件。比如下面的components中的Star.vue就是一個業務元件。這一類元件的編寫通常涉及到元件常用的props,slot和自定義事件等。

  components
  └─ Star.vue

與業務無關的獨立元件

這一類元件通常是與業務功能無關的獨立元件。這類元件通常是作為基礎元件，在各個業務元件或者頁面元件中被使用。目前市面上比較流行的ElementUI和iview等中包含的元件都是獨立元件。如果是自己定義的獨立元件，比如富文字編輯器等，通常寫在utils目錄中。

元件的編寫

說完了元件的分類，接下來我們談一談元件的編寫。要寫好一個元件，我們需要考慮哪些因素。首先一個元件最重要的兩個一定是資料和事件。另外，元件開發要考慮可擴充套件性，在vue中組價你的擴充套件通過slot來實現。
資料主要是指：data和prop。其中data主要是用於元件內部的資料展示，通常是一個函式。而prop是接收外部資料，涉及到資料的校驗，資料的擴充套件等，是非常重要的一個API。

事件:元件的事件(event)不同於在普通元素身上繫結事件。元件事件應該如何觸發，是在父元件中觸發還是在元件內部元素身上觸發。

slot:主要用於元件的擴充套件。同樣是元件開發非常重要的API。

綜上所述：元件開發中有三個非常重要的API,可以戲稱為元件開發三要素：prop,event和slot。接下來我們將從元件開發的角度來分別講述這三個API的使用。並不僅僅是簡單的使用。

屬性prop

prop定義了元件可以接收哪些可配置的屬性。主要是用來接收父元件傳遞的資料。props接收屬性時可以是陣列形式，也可以是物件形式。如果不涉及到型別校驗或者其他校驗可以直接使用陣列形式，如果涉及到校驗最好使用物件形式。
陣列形式：

props:['name','age']

物件形式： 使用物件的形式，可以對資料的型別，是否必填，以及其他特徵進行校驗。這對於元件化開發非常有利。
Child.vue定義元件

<template>
  <div class="container">
    姓名：{{name}}
    年齡：{{age}}
    <button :class = "type">點選</button>
  </div>
</template>

<script>
export default {
  name:'Child',
  props:{
    name:{
      type:String,
      require:true
    },
    age:{
      type:Number
    },
    type:{
      //校驗： 判斷type是否是success,warning和primary之一。
      validator:function(value){
        return (['success','warning','primary'].indexOf(value)) > -1
      }
    }
  }
}
</script>

Parent.vue使用元件

<Child :name = name  :age = age :type = type></Child>

定義元件時，name是String型別且是必填的，age是number型別非必填的。type是必須是success,warning和primary中的某一個。

自定義事件

如何觸發元件上定義的事件：
假設現在我們需要給我們定義的Child元件新增點選事件：這時候我們一般是通過在元件內部的button上通過$emit
觸發事件，然後在父元件中監聽。
在元件中通過$emit定義事件：
Child.vue

<template>
  <div class="container">
    姓名：{{name}}
    年齡：{{age}}
    <!-- 觸發事件 -->
    <button @click ="$emit('onClick','自定義事件')" :class = "type">點選</button>
  </div>
</template>

Parent.vue監聽事件

 <Child @onClick = 'handleClick' :age = age :type = type></Child>

slot

我們定義的元件通常會被用到各個地方，但是並不一定能夠滿足所有的使用場景，有時候我們需要
進行一些功能的擴充套件。這時候就需要用到slot了。一句話描述slot:就是用來在元件中插入新的內容。
比如我們剛剛定義的Child元件，需要插入一段話。那麼這時候就需要用到slot了。
Child.vue中使用slot

<template>
  <div class="container">
    姓名：{{name}}
    年齡：{{age}}
    <button @click ="$emit('onClick','自定義事件')" :class = "type">點選</button>
    <slot></slot>
  </div>
</template>

Parent.vue中擴充套件功能。插入一段話：

<template>
  <div class="container">
    <Child @onClick = 'handleClick' :age = age :type = type>
      <div>這是通過slot插入的一段話</div>
    </Child>
  </div>
</template>

如上所示：在Child.vue中使用了slot，在Parent.vue中使用CHild時，插入了一段話。
實現了功能的擴充套件。當然如果需要擴充套件更多的功能可以使用具名插槽，這裡就不具體介紹了。

總結：

元件的分類：

  1. 頁面級元件
  2. 業務上可複用的基礎元件
  3. 與業務無關的獨立功能元件

元件開發三要素
prop,自定義事件,slot是組成元件的三個重要因素。

  1. prop用於定義元件的屬性。
  2. 自定義事件用於觸發元件的事件。
  3. slot用於元件功能的擴充套件。

通過合理的使用這三個API，可以更好地幫助我們開發元件。

相關文章