tencent cloud

Feedback

Abstract Nodes

Last updated: 2024-03-04 23:14:26

    Use abstract nodes within components

    In the development of TCMPP, there are instances where certain nodes within a custom component template are not determined by the custom component itself, but rather by the caller of the custom component. In such cases, these nodes can be declared as "abstract nodes".
    For instance, let's consider the implementation of a "selectable-group" component, which can accommodate either a radio button ("custom-radio") or a checkbox ("custom-checkbox"). The wxml for this component could be written as follows:
    <!-- selectable-group.wxml -->
    <view qq:for="{{labels}}">
    <label>
    <selectable disabled="{{false}}"></selectable>
    {{item}}
    </label>
    </view>
    Herein, "selectable" is not a component declared in the usingComponents field of the json file, but rather an abstract node. It needs to be declared in the componentGenerics field:
    {
    "componentGenerics": {
    "selectable": true
    }
    }

    Use components containing abstract nodes

    When using the selectable-group component, it is imperative to specify which component exactly "selectable" refers to:
    <selectable-group generic:selectable="custom-radio" />
    When using the selectable-group component, it is imperative to specify which component exactly "selectable" refers to:
    <selectable-group generic:selectable="custom-checkbox" />
    The "selectable" node will consequently generate an instance of the "custom-checkbox" component.
    Note:
    The aforementioned custom-radio and custom-checkbox must be included in the usingComponents definition section of the json file corresponding to this wxml.
    {
    "usingComponents": {
    "custom-radio": "path/to/custom/radio",
    "custom-checkbox": "path/to/custom/checkbox"
    }
    }

    Default Component of Abstract Nodes

    Abstract nodes can designate a default component, which will instantiate the default component when a specific component is not designated. The default component can be identified within the componentGenerics field:
    {
    "componentGenerics": {
    "selectable": {
    "default": "path/to/default/component"
    }
    }
    }
    Note:
    In the generic reference of the node generic:xxx="yyy", the value yyy can only be a static value and cannot include data binding. Therefore, the characteristics of abstract nodes are not applicable to scenarios where the node name is determined dynamically.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support