最近項目做完了，抽出一些時間做一些總結(jié)，主要是針對于可復(fù)用組件的解耦和樣式復(fù)用。
一.數(shù)據(jù)從父組件傳入
為了解耦，子組件本身就不能生成數(shù)據(jù)。即使生成了，也只能在組件內(nèi)部運作，不能傳遞出去,下面是在一些較復(fù)雜的場景中，對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))拷貝應(yīng)注意以下幾點:
- 如果obj里面有時間對象，則JSON.stringify后再JSON.parse的結(jié)果，時間將只是字符串的形式。而不是時間對象；
- 如果obj里有RegExp、Error對象，則序列化的結(jié)果將只得到空對象；
- 如果obj里有函數(shù)，undefined，則序列化的結(jié)果會把函數(shù)或 undefined丟失；
- 如果obj里有NaN、Infinity和-Infinity，則序列化的結(jié)果會變成null
- JSON.stringify()只能序列化對象的可枚舉的自有屬性，例如 如果obj中的對象是有構(gòu)造函數(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的應(yīng)用
現(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知識點梳理）查看。
