# Abstract nodes

This feature Mini Program base library version 1.9.6 Start supporting.

# Using 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 caller of the custom component. You can declare this 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. This component's wxml It can be written like this:

Code example:

{% Minicode ('ztPzoImW7E7P') %}

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

Where "selectable" is not anything in the json Document usingComponents Field, but rather an abstract node. It needs to be in componentGenerics Field Declarations:

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

# Using components that contain abstract nodes

In the use of selectable-group Component, you must specify which component "selectable" is:

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

In this way, after generating this selectable-group Component, 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 above custom-radio and custom-checkbox Need to be included in this wxml Corresponding json Document usingComponents In the definition paragraph.

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

# The default component of an abstract node

An abstract node can specify a default component, and when a concrete component is not specified, an instance of the default component is created. The default component can be found in the componentGenerics Specified in the field:

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

# Note

• Node generic reference generic:xxx="yyy" In, value yyy Can only be static values and cannot contain data binding. Therefore, the abstract node feature is not suitable for scenarios where node names are determined dynamically.