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，能夠更好地幫助咱們開發組件。