組件模版和樣式

類似于頁(yè)面，自定義組件擁有自己的 ttml/wxml 模版和 ttss/wxss 樣式。

組件模版

組件模版的寫(xiě)法與頁(yè)面模板相同。組件模版與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹(shù)，將被插入到組件的引用位置上。

在組件模板中可以提供一個(gè) <slot> 節(jié)點(diǎn)，用于承載組件引用時(shí)提供的子節(jié)點(diǎn)。

<!-- 自定義組件模板 -->
<view class="component-wrapper">
  <view>組件內(nèi)部節(jié)點(diǎn)</view>
  <slot></slot>
</view>

<!-- 引用自定義組件的頁(yè)面模版 -->
<view>
  <my-component>
    <view>組件 slot 內(nèi)容</view>
  </my-component>
</view>

注意，在模版中引用到的自定義組件及其對(duì)應(yīng)的節(jié)點(diǎn)名需要在 json 文件中顯式定義，否則會(huì)被當(dāng)作一個(gè)無(wú)意義的節(jié)點(diǎn)。除此以外，節(jié)點(diǎn)名也可以被聲明為抽象節(jié)點(diǎn)

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

與普通的 ttml/wxml 模版類似，可以使用數(shù)據(jù)綁定，這樣就可以向子組件的屬性傳遞動(dòng)態(tài)數(shù)據(jù)。

<!-- 引用自定義組件的頁(yè)面模版 -->
<view>
  <my-component data-a="{{ data1 }}" data-b="{{ data2 }}">
    <view>組件 slot 內(nèi)容</view>
  </my-component>
</view>

在以上例子中，組件的屬性 dataA 和 dataB 將收到頁(yè)面?zhèn)鬟f的數(shù)據(jù)。頁(yè)面可以通過(guò) setData 來(lái)改變綁定的數(shù)據(jù)字段。

組件的 slot

在組件的 ttml/wxml 中可以包含 slot 節(jié)點(diǎn)，用于承載組件使用者提供的 ttml/wxml 結(jié)構(gòu)。

默認(rèn)情況下，一個(gè)組件的 ttml/wxml 中只能有一個(gè) slot。需要使用多 slot 時(shí)，應(yīng)使用不同的 name 來(lái)區(qū)分。

<!-- 自定義組件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>Content gose here</view>
  <slot name="after"></slot>
</view>

使用時(shí)，用 slot 屬性來(lái)將節(jié)點(diǎn)插入到不同的 slot 上。

<!-- 引用自定義組件的頁(yè)面模版 -->
<view>
  <my-component>
    <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 -->
    <view slot="before">這里是插入到組件slot name="before"中的內(nèi)容</view>

    <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
    <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
  </my-component>
</view>

組件樣式

組件對(duì)應(yīng) ttss/wxss 文件的樣式，只對(duì)組件 ttml/wxml 內(nèi)的節(jié)點(diǎn)生效。編寫(xiě)組件樣式時(shí)，需要注意以下幾點(diǎn)：

• 繼承樣式，如 font 、color ，會(huì)從組件外繼承到組件內(nèi)。
• 除繼承樣式外，app.ttss/wxss 中的樣式、組件所在頁(yè)面的的樣式對(duì)自定義組件無(wú)效。

除此以外，組件可以使用 :host 選擇器，指定它所在節(jié)點(diǎn)的默認(rèn)樣式。

/* 組件 my-component 的樣式表 */
:host {
  color: red;
}

在 ttml 中：

<my-component>這段文本為紅色的</my-component>

外部樣式類

此功能正在支持中