tencent cloud

Feedback

Component Constructor

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

    Definition Section and Illustrative Methodology

    The Component constructor can be used to define components, invoking the Component Constructor allows the specification of component attributes, data, and methods.
    Definition section
    Type
    Required or not
    Description
    properties
    Object Map
    No
    The external attributes of the component are a mapping table from attribute names to attribute settings. The attribute settings can contain three fields: type, which denotes the attribute type, value, which signifies the initial value of the attribute, and observer, which represents the response function when the attribute value is altered.
    observer
    Object
    No
    The internal data of the component, along with properties, is used for the template rendering of the component.
    data
    Object
    No
    The component data field observer is used to monitor changes in properties and data. For more details, see Data Observer.
    observers
    Object
    No
    The methods of the component include event response functions and any custom methods. For information on the usage of event response functions, see Component Events.
    methods
    Object
    No
    A mechanism for code reuse between components, akin to mixins and traits. For more details, see behaviors.
    behaviors
    String Array
    No
    The component lifecycle function is executed when the component instance has just been created. Please note that setData cannot be called at this time. For more details, see Component Lifecycle.
    created
    Function
    No
    The component lifecycle function is executed when the component instance has just been created. Please note that setData cannot be called at this time. For more details, see Component Lifecycle.
    attached
    Function
    No
    The component lifecycle function is executed after the component layout has been completed. For more details, see Component Lifecycle.
    ready
    Function
    No
    The component lifecycle function is executed when the component instance enters the page node tree. For more details, see Component Lifecycle.
    moved
    Function
    No
    The component lifecycle function is executed when the component instance is removed from the page node tree. For more details, see Component Lifecycle.
    detached
    Function
    No
    The component lifecycle function is executed when the component instance is removed from the page node tree. For more details, see Component Lifecycle.
    relations
    Object
    No
    Definition of relationships between components. For more details, see Inter-component Relationships.
    externalClasses
    String Array
    No
    External style classes accepted by the component. For more details, see Component Templates and Styles.
    options
    Object Map
    No
    Certain options (specific settings will be discussed when related characteristics are introduced in the documentation, not listed here for now).
    lifetimes
    Object
    No
    Component lifecycle declaration object. For more details, see Component Lifecycle.
    pageLifetimes
    Object
    No
    The lifecycle declaration object of the page where the component is located, supporting page lifecycles such as "show" and "hide", etc. For more details, see Component Lifecycle.
    definitionFilter
    Function
    No
    Definition section filters, used for custom component extensions. For more details, see Custom Component Extensions.
    The generated component instance can be accessed through 'this' in the component's methods, lifecycle functions, and property observers. The general attributes of the component are as follows:
    Attribute name
    Class attributes
    Description
    is
    string
    File path of component
    id
    string
    Node ID
    dataset
    string
    Node Dataset
    data
    object
    Component data, including internal data and attribute values
    properties
    object
    Component Data, including internal data and attribute values (consistent with data)
    The general methods of the component are as follows:
    Method Name
    Parameter
    Description
    setData
    Object newData
    Establish data and execute view layer rendering
    hasBehavior
    Object behavior
    Inspect whether the component possesses behavior (the inspection will recursively check all behaviors that have been directly or indirectly introduced)
    triggerEvent
    String name, Object detail, Object options
    Trigger events. For more details, see Component Events.
    createSelectorQuery
    -
    Create a SelectorQuery object, with the selection scope confined to this component instance.
    createIntersectionObserver
    -
    Create an IntersectionObserver object, with the selection scope limited to this component instance.
    selectComponent
    String selector
    Use the selector to choose the component instance node, returning the first matched component instance object (which will be influenced by wx://component-export).
    selectAllComponents
    String selector
    Use the selector to select the component instance nodes, returning an array composed of all matched component instance objects.
    getRelationNodes
    String relationKey
    Get all associated nodes corresponding to this relationship. For more details, see Inter-Component Relationships.
    groupSetData
    Function callback
    Immediately execute the callback, where multiple setData will not trigger interface rendering (only required in certain special scenarios, such as for synchronizing interface rendering when setData is used simultaneously in different components).
    Sample Code:
    Component({
    
    behaviors: [],
    
    properties: {
    myProperty: { // Property Name
    type: String, // Type (required), currently accepted types include: String, Number, Boolean, Object, Array, null (indicating any type)
    value: '', // Initial attribute value (optional). If not specified, one will be selected based on the type.
    observer(newVal, oldVal, changedPath) {
    // Function to be executed when the property changes (optional), can also be written as a method name string defined in the methods section, such as: '_propertyChange'.
    // Typically, newVal is the newly set data, and oldVal is the old data.
    }
    },
    myProperty2: String // Simplified definition method
    },
    data: {}, // Private data, which can be used for template rendering
    
    lifetimes: {
    // Lifecycle function, which can be a function, or a method name defined in the methods section.
    attached() { },
    moved() { },
    detached() { },
    },
    
    // Lifecycle function, which can be a function, or a method name defined in the methods section.
    attached() { }, // The declaration here for 'attached' will be overridden by the declaration in the 'lifetimes' field.
    ready() { },
    
    pageLifetimes: {
    // Lifecycle functions of the page where the component is located
    show() { },
    hide() { },
    resize() { },
    },
    
    methods: {
    onMyButtonTap() {
    this.setData({
    // The method of updating attributes and data is similar to the method of updating page data.
    })
    },
    // It is recommended that internal methods start with an underscore.
    _myPrivateMethod() {
    // Here, data.A[0].B is set to 'myPrivateData'.
    this.setData({
    'A[0].B': 'myPrivateData'
    })
    },
    _propertyChange(newVal, oldVal) {
    
    }
    }
    
    })
    In the properties definition section, the property name uses camel case (propertyName); in wxml, when specifying attribute values, the corresponding use of hyphenation (component-tag-name property-name="attr value") is used, and camel case (attr="{{propertyName}}") is used when applied to data binding.

    Construct a page using the Component constructor

    In fact, the pages of the mini program can also be regarded as custom components. Therefore, pages can also be constructed using the Component constructor, possessing the same definition sections and instance methods as ordinary components. However, at this point, it is required that the corresponding json file contains the usingComponents definition section.
    At this point, the component's attributes can be used to receive parameters from the page, such as visiting the page /pages/index/index?paramA=123&paramB=xyz. If attributes paramA or paramB are declared, they will be assigned values of 123 or xyz, respectively.
    The lifecycle methods of the page (i.e., methods beginning with 'on') should be written in the methods definition section.
    Sample Code:
    {
    "usingComponents": {}
    }
    Component({
    
    properties: {
    paramA: Number,
    paramB: String,
    },
    
    methods: {
    onLoad() {
    this.data.paramA // The value of the page parameter paramA.
    this.data.paramB // The value of the page parameter paramB.
    }
    }
    
    })
    Note:
    While this.data can be used to access internal data and attribute values, they should not be directly modified. Instead, use setData for modifications.
    Lifecycle functions cannot be accessed through 'this' within component methods.
    Attribute names should avoid starting with 'data', i.e., they should not be named in the form of 'dataXyz'. This is because in WXML, 'data-xyz=""' will be treated as a node dataset, not as a component property.
    In the definition and usage of a component, the component's attribute names and data fields must not conflict with each other, even though they are located in different definition sections.
    Attributes of object type and data fields can include function type sub-fields, meaning functions can be passed through attributes of object type. This feature is not supported in versions of the bae library earlier than this.
    For attributes of type Object or Array, if a subfield of the property value is changed through this.setData of the component itself, the property observer will still be triggered. The observer will receive the newVal as the value of the changed subfield, with oldVal being empty, and changedPath containing information related to the subfield's field name.
    Custom components located in slots do not trigger the page lifetimes declared in the page lifecycle.
    
    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