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 | |
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. |
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 ) |
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 | |
createSelectorQuery | - | |
createIntersectionObserver | - | |
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). |
Component({behaviors: [],properties: {myProperty: { // Property Nametype: 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 renderinglifetimes: {// 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 locatedshow() { },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) {}}})
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.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./pages/index/index?paramA=123¶mB=xyz
. If attributes paramA or paramB are declared, they will be assigned values of 123 or xyz, respectively.{"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.}}})
Was this page helpful?