一.元件模闆和樣式
類似于頁面，自定義元件擁有自己的 wxml 和模闆 wxss 樣式。
1.元件模闆
元件的寫法和頁面的寫法相同，元件模闆與元件資料結合後生成的數節點，
将被插入到元件的引用位置。在元件模闆中提供一個<slot> 節點，用于承載元件
引用時候提供的子節點。
例如：
<view class="wrapper">
<view>這裡是元件的内部節點</view>
<slot></slot>
</view>
引用在頁面的.json 檔案中配置。
"usingComponents": {
"v-component": "/components/cs/cs"
}
"v-component" :為自定義的模闆名字，頁面引用的時候用，
"/components/cs/cs" 引用元件的路徑
頁面中引用 如下：
<v-component>
<view>這裡是插入到元件slot中的内容</view>
</v-component>
2.元件中的模闆資料綁定
與普通的模闆資料綁定相同，動态像子元件傳遞資料。
例如：
<v-component prop-a="{{dataA}}" prop-b="{{dataB}}">
<view>這裡是插入到元件slot中的内容</view>
</v-component>
元件接收到頁面傳遞過來的資料，頁面可以通過setData 來改變綁定的綁定字段。
（目前隻能傳遞JSON資料）
3.元件的wxml 的slot
預設情況下，一個元件的wxml 中隻能有一個slot,需要使用多個slot 時，可以在元件js
聲明啟用。
Component({
options:{
multipleSlots: true // 在元件定義的選項中啟用多slot 支援
}，
properties:{},
methods:{}
})
此時在元件就可以啟用多個slot,以不同的name 來區分。
例如：
<view class="wrapper">
<slot name=“head”></slot>
<view>這裡是元件的内部節點</view>
<slot name="footer"></slot>
</view>
在使用的時候
<v-component >
<view slot="head">slot中的頭部内容</view>
<view slot="footer">slot中的底部内容</view>
</v-component>
4.元件樣式
元件對應wxss 檔案的樣式，隻對元件wxml 内的節點生效。編寫元件樣式時注意：
(1) 元件和引用的頁面，不能使用id選擇器，(#a),屬性選擇器（[a]）和标簽名屬性
選擇器，請改用class 選擇器。
(2) 元件和引用元件的頁面中使用後代選擇器(.a .b) 在極端情況下會有非預期的表現。
(3)子元素選擇器(.a>.b) 隻能用于view 元件與其子節點之間，用于其他元件可以能導緻
非預期的情況。
(4)繼承樣式，如font , color 會從外部元件繼承到元件内。
(5)除繼承樣式外，app.wxss 中的樣式，元件所在頁面中的樣式對自定義樣式無效。
（6）元件可以指定節點的預設樣式 :host{color:yellow;}
5.外部樣式
元件接收外部傳入的樣式類，可以在Component 中用externalClasses 定義若幹個外部樣式
類，這個特性可以用實作類似于，view 元件的 hover-class屬性，頁面可以提供一個樣式類
賦予 view 的hover-class 這個一樣式類寫在頁面中，而非， view 元件的實作中。
例如：
/* 元件 custom-component.js */
Component({
externalClasses:['my-class']
})
<!-- 元件 custom-component.wxml -->
<v-component class="my-class" >
這段文本的顔色由外部組建的 class 覺得
</v-component>
元件的使用或者可以指定這個樣式類對應的class, 就像使用普通屬性樣式一樣
頁面的WXML
<v-component my-class="red-text"></v-component>
.red-text{
color:red;
}
6.使用元件接收全局樣式
預設情況下，自定義元件的樣式隻受到wxss 的影響
(1) app.wxss 中使用了标簽名選擇器，影響到頁面和全部元件，
(2) 在自定義的元件中激活了 addGlobalClass 選項，這樣使自定義
元件能被app.wxss 或頁面的wxss 中的所有樣式。
要激活 addGlobalClass 選項，隻需在Component 構造中将 options.addGlobalClass
字段為true (當激活了 addGlobalClass 選項後，存在外部樣式污染樣式元件的風險)
/* 元件 custom-component.js */ Component({ options: { addGlobalClass: true, } })
/* 元件 custom-component.wxml */
<text class="red-text">
這段文字顔色由 `app.wxss`和頁面`wxss` 中的樣式定義來規定
</text>
/*app.wxxs*/
.red-text{
color:red;
}