組件模板

組件模板和頁(yè)面模板寫法相同。支持插槽。

模板數(shù)據(jù)綁定

父組件通過屬性向子組件傳遞數(shù)據(jù)。

組件的slot插槽

插槽用于承載父組件提供的 wxml 結(jié)構(gòu)。默認(rèn)只有一個(gè)插槽，可以通過配置 options: { multipleSlots: true } 支持多插槽，使用時(shí)，用 slot 屬性來(lái)將節(jié)點(diǎn)插入到不同的 slot 上。。

?

組件樣式

默認(rèn)樣式只對(duì)組件節(jié)點(diǎn)生效。只能使用clsss類名選擇器。

?

組件默認(rèn)樣式根節(jié)點(diǎn)使用 :host選擇器。

?

組件樣式隔離

默認(rèn)情況下組件的樣式是隔離的。

可以設(shè)置樣式隔離選項(xiàng)來(lái)指定組件的樣式隔離。

options: {

styleIsolation: 'isolated'

}

?

選項(xiàng)

isolated：頁(yè)面和組件的樣式不相互影響。

apply-shared：頁(yè)面樣式影響組件樣式，組件樣式不影響頁(yè)面樣式。

shared：頁(yè)面和組件的樣式相互影響。

?

這個(gè)選項(xiàng)也可以在json文件中配置。

也可以設(shè)置addGlobalClass: true選項(xiàng)，這個(gè)選項(xiàng)等價(jià)于styleIsolation:”apply-shared”。

外部樣式類

定義externalClasses這個(gè)字段，啟用組件接受外部傳入的樣式類。

?

?

?

引用頁(yè)面或父組件的樣式

組件即使定義了隔離，也可以引用父頁(yè)面的樣式。

組件中可以使用 ~ 來(lái)引用這個(gè)類的樣式。

<view class="~blue-text">?這段文本是藍(lán)色的 </view>

虛擬化組件節(jié)點(diǎn)

組件中設(shè)置options: { virtualHost: true,}，可以將組件那個(gè)標(biāo)簽節(jié)點(diǎn)隱藏，只將組件內(nèi)的節(jié)點(diǎn)插入到頁(yè)面中。

?

?

?