抽象节点

有时，自定义组件模版中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为 “抽象节点”。

例如，我们现在来实现一个“选框组”（selectable-group）组件，它其中可以放置单选框（custom-radio）或者复选框（custom-checkbox）。这个组件的 ttml/wxml 可以这样编写：

在 selectable-group.ttml 中:

  1. <view :for="{{ labels }}">
  2.   <label>
  3.     <selectable disabled="{{ false }}"></selectable>
  4.     {{ item }}
  5.   </label>
  6. </view>

其中，selectable 不是任何在 json 文件的 usingComponents 字段中声明的组件，而是一个抽象节点。它需要在 componentGenerics 字段中声明：

  1. {
  2.   "componentGenerics": {
  3.     "selectable": true
  4.   }
  5. }

使用包含抽象节点的组件

在使用 selectable-group 组件时，必须指定 selectable 具体是哪个组件：

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

这样，在生成这个 selectable-group 组件的实例时，selectable 节点会生成 custom-radio 组件实例。类似地，如果这样使用：

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

selectable 节点则会生成 custom-checkbox 组件实例。

注意：上述的 custom-radio 和 custom-checkbox 需要包含在这个 ttml 对应 json 文件的 usingComponents 定义段中。

  1. {
  2.   "usingComponents": {
  3.     "custom-radio": "path/to/custom/radio",
  4.     "custom-checkbox": "path/to/custom/checkbox"
  5.   }
  6. }

抽象节点的默认组件

抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定：

  1. {
  2.   "componentGenerics": {
  3.     "selectable": {
  4.       "default": "path/to/default/component"
  5.     }
  6.   }
  7. }

注意：节点的 generic 引用 generic:xxx="yyy" 中，值 yyy 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。

原文: https://developer.toutiao.com/docs/framework/custom_component_abstract_nodes.html