# Abstract nodes

This feature has been supported since Weixin Mini Program base library version {% version ('1.9.6')%}.

# Use abstract nodes in components

Sometimes, there are nodes in a custom component template whose corresponding custom component is determined not by the custom component itself, but by the custom components caller. At this point, you can declare the node as an "abstract node."

For example, let's now implement a "selectable-group" component in which you can place a custom-radio or custom-checkbox. The wxml for this component can be written like this:

Code example:

Preview with Developer Tool

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

Where "selectable" is not any component declared in theusingComponentsfield of the json file, but an abstract node.It needs to be declared in thecomponentGenericsfield:

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

# Use components that contain abstract nodes

When using a selectable-group component, you must specify which component "selectable" is:

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

Thus, when an instance of this selectable-group component is generated, the "selectable" node generates an instance of the "custom-radio" component. Similarly, if used this way:

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

The "selectable" node generates an instance of the "custom-checkbox" component.

Note: The abovecustom-radioandcustom checkboxneed to be included in theusingComponentsdefinition of the wxml equivalent JSON file.

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

# Default components of an abstract node

An abstract node can specify a default component and creates an instance of the default component when the specific component is not specified.Default components can be specified in thecomponentGenericsfield:

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

# Note

• The generic reference for the nodegeneric: xxx = "yyy"The valueyyycan only be static and cannot contain data bindings.Therefore, abstract node characteristics do not apply to scenarios where node names are dynamically determined.