Custom Components

Component

Create a custom component that accepts an Object type parameter.

Parameter

Object object

definition segment	Type	Is it required?	Description
properties	Object Map	No	The external attributes of the component are a mapping table from attribute names to attribute settings
data	Object	No	The internal data of the component, together with properties, is used for component template rendering
observers	Object	No	Component data field listener, used to listen to changes in properties and data, see Data listener
methods	Object	No	Component methods, including event response functions and any custom methods. For the use of event response functions, see Inter-component communication and events
behaviors	String Array	No	Similar to the inter-component code reuse mechanism of mixins and traits, see behaviors
created	Function	No	Component lifecycle function - executed when the component instance is just created, note that setData cannot be called at this time
attached	Function	No	Executed when the component instance enters the page node tree
ready	Function	No	Component lifecycle function - executed after component layout is completed
detached	Function	No	Component lifecycle function - executed when the component instance is removed from the page node tree
relations	Object	No	Definition of inter-component relationships, see Inter-component relationships
externalClasses	String Array	No	External style classes accepted by components, see External style classes
options	Object Map	No	Some options (specific option settings will be involved when introducing related features in the document, which are not listed here for the time being)
lifetimes	Object	No	Component life cycle declaration object, see Component life cycle
pageLifetimes	Object	No	Life cycle declaration object of the page where the component is located, see Component life cycle

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

Property name	Type	Description
is	String	The file path of the component
id	String	Node id
dataset	String	Node dataset
data	Object	Component data, including internal data and attribute values
properties	Object	The file path of the component (Consistent with data)

Method	Parameter	Description
setData	Object newData	Set data and perform view layer rendering
triggerEvent	String name, Object detail, Object options	Trigger events, see Communication and events between components
createSelectorQuery	-	Create an SelectorQuery object, the selector selection range is within this component instance
createIntersectionObserver	-	Create an IntersectionObserver object, the selector selection range is within this component instance
selectComponent	String selector	Use the selector to select the component instance node and return the first matched component instance object (will be affected by wx://component-export)
selectAllComponents	String selector	Use the selector to select the component instance node and return an array of all matched component instance objects (will be affected by wx://component-export)
selectownerComponent	String selector	Get all associated nodes corresponding to this relationship, see
getRelationNodes	String relationKey	Get all associated nodes corresponding to this relationship, see Inter-component relationships
hasBehavior	hasBehavior	Check whether the component has behavior (all behaviors introduced directly or indirectly will be recursively checked during the check)

Sample code:

Component({
  behaviors: [],

  // Property definition (see below for details)
  properties: {
    myProperty: {
      // Attribute name
      type: String,
      value: "",
    },
    myProperty2: String, // Simplified definition
  },

  data: {}, // Private data, available for template rendering

  lifetimes: {
    // Life cycle function, can be a function, or a method name defined in the methods section
    attached: function () {},
    moved: function () {},
    detached: function () {},
  },

  // Life cycle function, can be a function, or a method name defined in the methods section
  attached: function () {}, // The attached declaration here is overwritten by the declaration in the lifetimes field
  ready: function () {},

  pageLifetimes: {
    // Life Cycle Function for the Page on which the component is located
    show: function () {},
    hide: function () {},
    resize: function () {},
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // The method of updating properties and data is similar to that of updating page data
      });
    },
    // The internal method recommends starting with an underscore
    _myPrivateMethod: function () {
      // Here will be data.A[0].B Set to 'myPrivateData'
      this.setData({
        "A[0].B": "myPrivateData",
      });
    },
    _propertyChange: function (newVal, oldVal) {},
  },
});

properties

relations definition section	Type	Is it required?	Description
type	-	Yes	Property type
value	-	No	Property initial value
observer	Function	No	Callback function when property value changes

Property value changes can be monitored using observer. Currently, this field is not recommended in the new version of the base library. Instead, the observers field of the Component constructor is used instead, which is more powerful and has better performance.

TIP

The type field in the definition section is a required item.

Sample code:

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // When property values change
      }
    },
    lastLeaf: {
      // This property can be Number 、 String 、 Boolean One of three types.
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

The property type can be one of String, Number, Boolean, Object, Array, or null to indicate no type restriction.

In most cases, it is best to specify an exact type for a property. In this way, when specifying attribute values

<custom-comp min="1" max="5" />

At this time, since the corresponding attributes of the custom component are specified as Number type, min and max will be assigned 1 and 5, not '1' and '5', that is:

this.data.min === 1 // true
this.data.max === 5 // true

tips

• Use this.data to obtain internal data and attribute values; but directly modifying it will not apply the changes to the interface, and setData should be used to modify it;
• Use this.data to obtain internal data and attribute values; but directly modifying it will not apply the changes to the interface, and setData should be used to modify it;
• Use this.data to obtain internal data and attribute values; but directly modifying it will not apply the changes to the interface, and setData should be used to modify it;
• Use this.data to obtain internal data and attribute values; but directly modifying it will not apply the changes to the interface, and setData should be used to modify it;

Behavior

Register a behavior, accepting an Object type parameter.

Parameter

Object object

definition segment	Type	Is it required?	Description
properties	Object Map	No	Same component attributes
data	Object	No	Same component data
methods	Object	No	Same custom component methods
behaviors	String Array	No	Similar to the inter-component code reuse mechanism of mixins and traits, see behaviors
created	Function	No	Component life cycle function-executed when the component instance is just created. Note that setData cannot be called at this time
attached	Function	No	Component life cycle function-executed when the component instance enters the page node tree
ready	Function	No	Component life cycle function-executed after component layout is completed
detached	Function	No	Component life cycle function-executed when the component instance is removed from the page node tree
relations	Object	No	Similar to the inter-component code reuse mechanism of mixins and traits, see Relationships between components
lifetimes	Object	No	Component life cycle declaration object, see Component Lifecycle
pageLifetimes	Object	No	Life cycle declaration object of the page where the component is located, see Component Lifecycle

Code example:

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})