QQ小程序 組件模板和樣式

類似于頁面，自定義組件擁有自己的 qml 模板和 qss 樣式。

組件模板 組件模板的寫法與頁面模板相同。組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹，將被插入到組件的引用位置上。 在組件模板中可以提供一個(gè)<slot> 節(jié)點(diǎn)，用于承載組件引用時(shí)提供的子節(jié)點(diǎn)。

<!-- 組件模板 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
  <slot></slot>
</view>

<!-- 引用組件的頁面模板 -->
<view>
  <component-tag-name>
    <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
    <view>這里是插入到組件slot中的內(nèi)容</view>
  </component-tag-name>
</view>

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

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

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

代碼示例：

<!-- 引用組件的頁面模板 -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
    <view>這里是插入到組件slot中的內(nèi)容</view>
  </component-tag-name>
</view>

在以上例子中，組件的屬性 propA 和 propB 將收到頁面?zhèn)鬟f的數(shù)據(jù)。頁面可以通過 setData 來改變綁定的數(shù)據(jù)字段。 注意：這樣的數(shù)據(jù)綁定只能傳遞 JSON 兼容數(shù)據(jù)。

組件qml的slot

在組件的qml中可以包含 slot 節(jié)點(diǎn)，用于承載組件使用者提供的qml結(jié)構(gòu)。 默認(rèn)情況下，一個(gè)組件的qml中只能有一個(gè)slot。需要使用多slot時(shí)，可以在組件js中聲明啟用。

Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此時(shí)，可以在這個(gè)組件的qml中使用多個(gè)slot，以不同的 name 來區(qū)分。

<!-- 組件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>這里是組件的內(nèi)部細(xì)節(jié)</view>
  <slot name="after"></slot>
</view>

組件qml的slot 在組件的qml中可以包含 slot 節(jié)點(diǎn)，用于承載組件使用者提供的qml結(jié)構(gòu)。 默認(rèn)情況下，一個(gè)組件的qml中只能有一個(gè)slot。需要使用多slot時(shí)，可以在組件js中聲明啟用。

Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此時(shí)，可以在這個(gè)組件的qml中使用多個(gè)slot，以不同的 name 來區(qū)分。

<!-- 組件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>這里是組件的內(nèi)部細(xì)節(jié)</view>
  <slot name="after"></slot>
</view>

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

<!-- 引用組件的頁面模板 -->
<view>
  <component-tag-name>
    <!-- 這部分內(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>
  </component-tag-name>
</view>

組件樣式

組件對應(yīng)qss文件的樣式，只對組件qml內(nèi)的節(jié)點(diǎn)生效。編寫組件樣式時(shí)，需要注意以下幾點(diǎn)：

• 組件和引用組件的頁面不能使用id選擇器（#a）、屬性選擇器（[a]）和標(biāo)簽名選擇器，請改用class選擇器。
• 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預(yù)期的表現(xiàn)，如遇，請避免使用。
• 子元素選擇器（.a>.b）只能用于 view 組件與其子節(jié)點(diǎn)之間，用于其他組件可能導(dǎo)致非預(yù)期的情況。
• 繼承樣式，如 font 、 color ，會從組件外繼承到組件內(nèi)。
• 除繼承樣式外， app.qss 中的樣式、組件所在頁面的的樣式對自定義組件無效。

這樣，組件的使用者可以指定這個(gè)樣式類對應(yīng)的 class ，就像使用普通屬性一樣。 代碼示例：

<!-- 頁面的 QML -->
<custom-component my-class="red-text" />

.red-text {
  color: red;
}

使組件接受全局樣式 默認(rèn)情況下，自定義組件的樣式只受到自定義組件 qss 的影響。除非以下兩種情況：

• app.qss 或頁面的 qss 中使用了標(biāo)簽名選擇器（或一些其他特殊選擇器）來直接指定樣式，這些選擇器會影響到頁面和全部組件。通常情況下這是不推薦的做法。
• 在特定的自定義組件激活了 addGlobalClass 選項(xiàng)，這使得這個(gè)自定義組件能被 app.qss 或頁面的 qss 中的所有的樣式定義影響。 要激活addGlobalClass 選項(xiàng)，只需要在 Component 構(gòu)造器中將 options.addGlobalClass 字段置為 true 。 注意：當(dāng)激活了addGlobalClass 選項(xiàng)后，存在外部樣式污染組件樣式的風(fēng)險(xiǎn)，請謹(jǐn)慎選擇。

/* 組件 custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

<!-- 組件 custom-component.qml -->
<text class="red-text">
  這段文本的顏色由 `app.qss` 和頁面 `qss` 中的樣式定義來決定
</text>

/* app.qss */
.red-text {
  color: red;
}