微信小程序組件模板和樣式梳理
組件模板
組件模板和頁面模板寫法相同。支持插槽。
模板數據綁定
父組件通過屬性向子組件傳遞數據。
組件的slot插槽
插槽用于承載父組件提供的 wxml 結構。默認只有一個插槽，可以通過配置 options: { multipleSlots: true } 支持多插槽，使用時，用 slot 屬性來將節點插入到不同的 slot 上。。
組件樣式
默認樣式只對組件節點生效。只能使用clsss類名選擇器。
組件默認樣式根節點使用 :host選擇器。
組件樣式隔離
默認情況下組件的樣式是隔離的。
可以設置樣式隔離選項來指定組件的樣式隔離。
options: {
styleIsolation: 'isolated'
}
選項
isolated：頁面和組件的樣式不相互影響。
apply-shared：頁面樣式影響組件樣式，組件樣式不影響頁面樣式。
shared：頁面和組件的樣式相互影響。
這個選項也可以在json文件中配置。
也可以設置addGlobalClass: true選項，這個選項等價于styleIsolation:”apply-shared”。
外部樣式類
定義externalClasses這個字段，啟用組件接受外部傳入的樣式類。
引用頁面或父組件的樣式
組件即使定義了隔離，也可以引用父頁面的樣式。
組件中可以使用 ~ 來引用這個類的樣式。
<view class="~blue-text"> 這段文本是藍色的 </view>
虛擬化組件節點
組件中設置options: { virtualHost: true,}，可以將組件那個標簽節點隱藏，只將組件內的節點插入到頁面中。
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。