Vue的組件化
組件化是Vue的精髓，Vue就是由一個一個的組件構成的。Vue的組件化設計到的內容又非常多，當在面試時，被問到：談一下你對Vue組件化的理解。這時候又有可能無從下手，因此在這里闡釋一下個人對Vue的組件化的理解。
組件的分類
一般來說，組件大致可以分為三類：
- 頁面級別的組件。
- 業務上可復用的基礎組件。
- 與業務無關的獨立組件。
頁面級別的組件
頁面級別的組件，通常是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時，插入了一段話。
實現了功能的擴展。當然如果需要擴展更多的功能可以使用具名插槽，這里就不具體介紹了。
總結：
組件的分類：
- 頁面級組件
- 業務上可復用的基礎組件
- 與業務無關的獨立功能組件
組件開發三要素
prop,自定義事件,slot是組成組件的三個重要因素。
prop用於定義組件的屬性。- 自定義事件用於觸發組件的事件。
slot用於組件功能的擴展。
通過合理的使用這三個API，可以更好地幫助我們開發組件。