https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
組件擁有自己的 wxml 模板和 wxss 樣式
組件模板中可以提供一個 <slot> 節點，用於承載組件引用時提供的子節點
<!-- 組件模板 -->
<view class="wrapper">
<view>這里是組件的內部節點</view>
<slot></slot>
</view>
<!-- 引用組件的頁面模板 -->
<view>
<component-tag-name>
<!-- 這部分內容將被放置在組件 <slot> 的位置上 -->
<view>這里是插入到組件slot中的內容</view>
</component-tag-name>
</view>
默認情況下，一個組件的wxml中只能有一個slot。需要使用多slot時，可以在組件js中聲明啟用。
Component({
options: {
multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
/*…*/
})
在這個組件的wxml中使用多個slot，以不同的 name 來區分。
<!-- 組件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>這里是組件的內部細節</view>
<slot name="after"></slot>
</view>
使用
<!-- 引用組件的頁面模板 -->
<view>
<component-tag-name>
<!-- 這部分內容將被放置在組件 <slot name="before"> 的位置上 -->
<view slot="before">這里是插入到組件slot name="before"中的內容</view>
<!-- 這部分內容將被放置在組件 <slot name="after"> 的位置上 -->
<view slot="after">這里是插入到組件slot name="after"中的內容</view>
</component-tag-name>
</view>
頁面模板引用自定義組件及其對應的節點名需要在 json 文件中顯式定義
數據綁定，這樣就可以向子組件的屬性傳遞動態數據。
<!-- 引用組件的頁面模板 -->
<view>
<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
</component-tag-name>
</view>
只能傳遞 JSON 兼容數據。自基礎庫版本 2.0.9 開始，還可以在數據中包含函數
組件樣式
只對組件wxml內的節點生效,注意
不能使用 id選擇器 #a 屬性選擇器[a] button(標簽選擇器）
避免使用代選擇器 .a .b
.a > .b 除非 .a 是 <view> ，否則不一定會生效
繼承樣式，如 font 、 color ，會從組件外繼承到組件內。
除繼承樣式外， app.wxss 樣式、頁面樣式對自定義組件無效（除非更改隔離選項）。
:host 指定所在節點樣式。
樣式隔離
默認自定義組件的樣式只受自身 wxss 影響，除非：
app.wxss 或頁面 wxss 中使用了標簽名選擇器（或一些其他特殊選擇器），不推薦。
指定樣式隔離選項 styleIsolation 。
Component({
options: {
styleIsolation: 'isolated'
}
})
或在.json文件中：
{
"styleIsolation": "isolated"
}
isolated （默認值） class 指定的樣式將不會相互影響
apply-shared 頁面影響自定義組件，自定義組件不影響頁面；
shared 頁面影響自定義組件，自定義組件影響頁面和 其他 apply-shared 或 shared 的自定義組件。（插件不可用）。
Component 構造器用於構造頁面 額外的樣式隔離選項可用：
page-isolated 完成隔離
page-apply-shared 只會受shared自定義組件影響
page-shared 會影響apply-shared、shared自定義組件，會受shared自定義組件影響。
addGlobalClass: true 等階於 styleIsolation: 'isolated'
外部樣式類
接受外部傳入的樣式類
注意：同一節點使用普通樣式類和外部樣式類時，兩個類的優先級是未定義的，避免這種情況。
/* 組件 custom-component.js */
Component({
externalClasses: ['my-class']
})
<!-- 組件 custom-component.wxml -->
<custom-component class="my-class">這段文本的顏色由組件外的 class 決定</custom-component>
<!-- 頁面的 WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />
<!-- 以下寫法需要基礎庫版本 2.7.1 以上 -->
<custom-component my-class="red-text large-text" />
.red-text {
color: red;
}
.large-text {
font-size: 1.5em;
}
引用頁面或父組件的樣式
即使啟用了樣式隔離 isolated，仍可以引用
引用頁面中的class：
<view class="~blue-text"> 引用頁面的樣式類 </view>
引用父組件中的class:
<view class="^red-text"> 引用父組件的樣式類 </view>
<view class="^^red-text"> 引用祖父組件的樣式類 </view>
獨立、通用的組件，請優先使用外部樣式類