最近項目做完了镇饺，抽出一些時間做一些總結，主要是針對于可復用組件的解耦和樣式復用送讲。
一.數(shù)據(jù)從父組件傳入
為了解耦奸笤，子組件本身就不能生成數(shù)據(jù)。即使生成了哼鬓，也只能在組件內(nèi)部運作监右，不能傳遞出去,下面是在一些較復雜的場景中，對props傳遞的參數(shù)加一些驗證异希，也是方便如果是數(shù)據(jù)類型不符合可以直接拋出異常健盒。
props: {
tableData: {
type: Array,
required: true // 必傳
},
titleName: String,
needNum: [String, Number], // 兩個類型都可以傳
isEdit: {
type: Boolean,
default: false // 默認false
}
}
props傳入?yún)?shù)，不建議對它進行操作称簿，如果要操作扣癣，請先在子組件深拷貝。如果你是用JSON.stringify, JSON.parse方法深拷貝需注意:
JSON.parse(JSON.stringify(obj))我們一般用來深拷貝憨降，其過程說白了 就是利用JSON.stringify 將js對象序列化（JSON字符串）父虑，再使用JSON.parse來反序列化(還原)js對象,
如果使用JSON.parse(JSON.stringify(obj))拷貝應注意以下幾點:
- 如果obj里面有時間對象，則JSON.stringify后再JSON.parse的結果授药，時間將只是字符串的形式士嚎。而不是時間對象；
- 如果obj里有RegExp悔叽、Error對象莱衩，則序列化的結果將只得到空對象；
- 如果obj里有函數(shù)娇澎，undefined笨蚁，則序列化的結果會把函數(shù)或 undefined丟失；
- 如果obj里有NaN九火、Infinity和-Infinity赚窃，則序列化的結果會變成null
- JSON.stringify()只能序列化對象的可枚舉的自有屬性册招，例如 如果obj中的對象是有構造函數(shù)生成的岔激， 則使用JSON.parse(JSON.stringify(obj))深拷貝后，會丟棄對象的constructor
- 如果對象中存在循環(huán)引用的情況也無法正確實現(xiàn)深拷貝是掰；
二.在父組件處理事件
比如某些子組件的click事件虑鼎，避免高耦合，邏輯最好放在父組件中，子組件只是一個承載體炫彩。
// 子組件 proflist
changeSort( sortObj ) {
this.$emit('sortChange', sortObj )
}
// 父組件
<proflist @hanldSortChange='sortChange'></proflist>
這樣既降低耦合匾七，保證子組件中數(shù)據(jù)和邏輯不會混亂。
三.slot的應用
現(xiàn)在有一個需求江兢，在同一個子組件中昨忆，我在不同的場景需要用到不同的按鈕，那么在封裝組件的時候就不用去寫按鈕杉允，只用在合適的未知留一個slot邑贴，把按鈕的位置留出來，然后再父組件中寫入：
// 子組件
<div class = 'public_btn'>
<slot name = 'button'></slot>
</div>
// 父組件
<child>
<button slot = 'button'>按鈕1</button>
</child>
這樣一個具名插槽靈活地解決了不同場景同一組件不同配置的問題叔磷。
四.統(tǒng)一管理各個組件公共樣式
這里以less為例：
var.less里面可以裝所有的公共樣式:
然后各個子頁面引進來就可以用拢驾，可以方便的做到樣式統(tǒng)一和日后樣式全局維護。涉及的變量改基，繼承繁疤，嵌套，混合秕狰，可以在我的第一篇簡書（整理之后的less知識點梳理）查看稠腊。
