在組件中使用抽象節(jié)點

有時，自定義組件模板中的一些節(jié)點，其對應的自定義組件不是由自定義組件本身確定的，而是自定義組件的調(diào)用者確定的。這時可以把這個節(jié)點聲明為“抽象節(jié)點”。 例如，我們現(xiàn)在來實現(xiàn)一個“選框組”（selectable-group）組件，它其中可以放置單選框（custom-radio）或者復選框（custom-checkbox）。這個組件的 qml 可以這樣編寫：

<!-- selectable-group.qml -->
<view qq:for="{{labels}}">
  <label>
    <selectable disabled="{{false}}"></selectable>
    {{item}}
  </label>
</view>

其中，“selectable”不是任何在 json 文件的 usingComponents 字段中聲明的組件，而是一個抽象節(jié)點。它需要在 componentGenerics 字段中聲明：

{
  "componentGenerics": {
    "selectable": true
  }
}

使用包含抽象節(jié)點的組件

在使用 selectable-group 組件時，必須指定“selectable”具體是哪個組件：

<selectable-group generic:selectable="custom-radio" />

這樣，在生成這個 selectable-group 組件的實例時，“selectable”節(jié)點會生成“custom-radio”組件實例。類似地，如果這樣使用：

<selectable-group generic:selectable="custom-checkbox" />

“selectable”節(jié)點則會生成“custom-checkbox”組件實例。 注意：上述的 custom-radio和 custom-checkbox 需要包含在這個 qml 對應 json 文件的 usingComponents 定義段中。

{
  "usingComponents": {
    "custom-radio": "path/to/custom/radio",
    "custom-checkbox": "path/to/custom/checkbox"
  }
}

抽象節(jié)點的默認組件

抽象節(jié)點可以指定一個默認組件，當具體組件未被指定時，將創(chuàng)建默認組件的實例。默認組件可以在 componentGenerics 字段中指定：

{
  "componentGenerics": {
    "selectable": {
      "default": "path/to/default/component"
    }
  }
}

Tips:

節(jié)點的 generic 引用 generic:xxx="yyy" 中，值 yyy 只能是靜態(tài)值，不能包含數(shù)據(jù)綁定。因而抽象節(jié)點特性并不適用于動態(tài)決定節(jié)點名的場景。