Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use WeChat Mini Programs Component constructor, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The Component constructor can be used to define the component, and you can specify the properties, data, methods, and so on of the component when calling the Component constructor.

Define whether a description is required for the segment type

The external property of the properties Object Map No component is a mapping table from the attribute name to the attribute setting. The attribute setting can contain three fields. Type represents the attribute type, value represents the initial value of the attribute, and observer represents the response function when the attribute value is changed.

Internal data of data Object No component, used together with properties for template rendering of component

Methods Object no component methods, including event response functions and arbitrary custom methods, for the use of event response functions, see component events

Whether behaviors String Array is similar to the code reuse mechanism between mixins and traits components, see behaviors

Created Function No component life cycle function, which is executed when the component instance enters the page node tree. Note that setData cannot be called at this time.

Attached Function No component life cycle function, which is executed when the component instance enters the page node tree

Ready Function No component lifecycle function, which is executed after the component layout is completed, and node information can be obtained (using SelectorQuery)

Moved Function No component lifecycle function, which is executed when the component instance is moved to another location in the node tree

Detached Function No component lifecycle function, which is executed when the component instance is removed from the page node tree

Relations Object No definition of relationships between components, see relationships between components

Options Object Map No some component options, see the instructions in other parts of the document

The generated component instance can be accessed through this in the component's methods, lifecycle functions, and properties observer. Component contains some common properties and methods.

Attribute name type description

The file path of the is String component

Id String node id

Dataset String node dataset

Data Object component data, including internal data and attribute values

Method name parameter description

SetData Object newData sets up data and performs view layer rendering

HasBehavior Object behavior checks whether the component has behavior (all behavior introduced directly or indirectly are checked recursively during the check)

TriggerEvent String name

Object detail

Object options triggers events, see component events

Create SelectorQuery creates a SelectorQuery object, and the selector is selected within this component instance

SelectComponent String selector uses the selector to select the component instance node and returns the first component instance object that matches

SelectAllComponents String selector uses the selector to select the component instance node and returns an array of all matching component instance objects.

GetRelationNodesString relationKey gets all the associated nodes corresponding to this relationship, see relationships between components

Code example:

Component ({

Behaviors: []

Properties: {

MyProperty: {/ / attribute name

Type: String, / / type (required). Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type)

Value:''/ / the initial value of the attribute (optional). If not specified, one will be selected based on the type

Observer: the function that is executed when the function (newVal, oldVal) {} / / attribute is changed (optional), or can be written as a string of method names defined in the methods section

}

MyProperty2: String / / simplified definition

}

Data: {}, / / Private data, which can be used for template rendering

/ / Lifecycle function, which can be a function or a method name defined in the methods section

Attached: function () {}

Moved: function () {}

Detached: function () {}

Methods: {

OnMyButtonTap: function () {

This.setData ({

/ / the method of updating properties and data is similar to that of updating page data.

})

}

_ myPrivateMethod: function () {

/ / Internal methods are recommended to start with an underscore

This.replaceDataOnPath (['A', 0,'B'], 'myPrivateData') / / here set data.A [0] .B to' myPrivateData'

This.applyDataUpdates ()

}

}

})

Note: in the properties definition segment, the attribute name is written in hump (propertyName); in wxml, the corresponding hyphen is used when specifying attribute values (component-tag-name property-name= "attr value"), and the hump is used in data binding (attr= "{{propertyName}}").

Tips:

Components constructed by the Component constructor can also be used as pages.

You can get internal data and property values using this.data, but do not modify them directly, you should use setData to modify them.

Lifecycle functions are not accessible through this in component methods.

Attribute names should not be named in the form dataXyz, because in WXML, data-xyz= "" is treated as a node dataset, not as a component property.

When defining and using a component, the component's property names and data fields cannot conflict with each other (although they are in different definition segments).

The above is all the contents of the article "how to use WeChat Mini Programs Component Constructor". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.