一.組件模板和樣式 類似於頁面，自定義組件擁有自己的 wxml 和模板 wxss 樣式。 1.組件模板 組件的寫法和頁面的寫法相同，組件模板與組件數據結合後生成的數節點， 將被插入到組件的引用位置。在組件模板中提供一個<slot> 節點，用於承載組件 引用時候提供的子節點。 例如： <view cl ...
一.組件模板和樣式
類似於頁面，自定義組件擁有自己的 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;
}
