（轉）微信小程序的抽象節點

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html

抽象節點

這個特性自小程序基礎庫版本 1.9.6 開始支持。

在組件中使用抽象節點

有時，自定義組件模板中的一些節點，其對應的自定義組件不是由自定義組件本身確定的，而是自定義組件的調用者確定的。這時可以把這個節點聲明為“抽象節點”。

例如，我們現在來實現一個“選框組”（selectable-group）組件，它其中可以放置單選框（custom-radio）或者復選框（custom-checkbox）。這個組件的 wxml 可以這樣編寫：

代碼示例：

在開發者工具中預覽效果

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

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

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

使用包含抽象節點的組件

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

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

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

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

“selectable”節點則會生成“custom-checkbox”組件實例。

注意：上述的 custom-radio 和 custom-checkbox 需要包含在這個 wxml 對應 json 文件的 usingComponents 定義段中。

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

抽象節點的默認組件

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

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

Tips:

• 節點的 generic 引用 generic:xxx="yyy" 中，值 yyy 只能是靜態值，不能包含數據綁定。因而抽象節點特性並不適用於動態決定節點名的場景。