# behaviors

Behaviorsare features used for code sharing between components, similar to "mixins" or "traits" in some programming languages.

Each behaviorcan contain a set of properties, data, life-periodic functions, and methods.When a component refers to it, its properties, data, and methods are incorporated into the component, and the life-periodic function is invoked at the appropriate time. Each component may refer to a plurality ofbehavior,behaviorOtherbehaviormay also be cited.

Please refer to the Behavior reference document for detailed parameter meaning and usage.

# Use in components

When a component is referenced, list them one by one in thebehaviorsdefinition paragraph.

Code example:

Preview with Developer Tool

// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  data: {
    myData: 'my-component-data'
  },
  created: function () {
    console.log('[my-component] created')
  },
  attached: function () { 
    console.log('[my-component] attached')
  },
  ready: function () {
    console.log('[my-component] ready')
  },
  methods: {
    myMethod: function () {
      console.log('[my-component] log by myMethod')
    },
  }
})

In the above example,my-componentcomponent definition is addedmy-behavior,

Andmy-behavioris structured as:

• Properties:myBehaviorProperty
• Data field:myBehaviorData
• Methods:myBehaviorMethod
• Life-periodic function:attached、created、ready

This will make themy-componentfinal structure as:

• Attributes:myBehaviorPropertyandmyProperty
• Data fields:myBehaviorData、myData
• Methods:myBehaviorMethod、myMethod
• Life-periodic function:attached、created、ready

When a component triggers a lifecycle, the order of execution of the life periodic functions in the example above is:

1. [my-behavior] created
2. [my-component] created
3. [my-behavior] attached
4. [my-component] attached
5. [my-behavior] ready
6. [my-component] ready

For detailed rules, refer to Rules for overriding and combining fields of the same name .

# Rules for coverage and combination of the same paragraph

A component and thebehaviorreferenced by it can contain fields of the same name, which can be handled as follows:

• If you have properties or methods with the same name:
  1. If the component itself has this property or method, the component's property or method overrides the property or method of the same name inbehavior;
  2. If the component itself does not have this property or method, the following property or method defined in thebehaviorsfield of the component covers the earlier property or method of the same name;
  3. Based on 2, if there is a nested referencebehaviorIn the case of, the rule is:The referencer's behaviorcoversThe same-name attribute or method in the referenced behavior.
• If there is a data field with the same name:
  • If the data fields of the same name are of object type, the object merges;
  • The rest of the case will be overwritten with the following rules:Referrer behavior>Behavior,Behavior>Behavior Behavior`.(Higher priority covers lower priority, and the largest is the highest priority)
• Life-periodic functions and observers do not overwrite each other, but are invoked one by one at the time of firing:
  • For different life periodic functions, the execution order of component life periodic functions is followed.
  • For the same kind of life periodic function and the same field observers, the following rules are followed:
    • Behaviortakes precedence over component execution;
    • The cited behaviortakes precedence overthe cited behavior;
    • The behaviorahead takes precedence over the behavior`behind;
  • If the same behavioris referenced more than once by a component, the life-periodic functions and observers it defines are not repeated.

Code example:

Preview with Developer Tool

# Built-in behaviors

A custom component can obtain some of the behavior of a built-in component by referring to the built-inbehavior.

Component({
  behaviors: ['wx://form-field']
})

In the previous example,wx: / / form-fieldrepresents a built-inbehavior,This allows this custom component to behave similarly to a form control.

The built-inbehaviortends to add attributes to components.Without special instructions, a component can override these attributes to change itstypeor addobserver。

# wx://form-field

Make custom components behave like form controls. The form component recognizes these custom components and returns the component's field name and its corresponding field value in the submit event.

Detailed usage and code examples can be found in: form component reference documentation

# wx://form-field-group

Support is available starting with the base library version {% version ('2.10.2')%}.

Enables the form component to recognize all form controls inside the custom component.

Detailed usage and code examples can be found in: form component reference documentation

# wx://form-field-button

Support is available starting with the base library version {% version ('2.10.3')%}.

Enables the form component to recognize the button inside the custom component. If a form-type button is set inside a custom component, it will be accepted by a form outside the component.

Detailed usage and code examples can be found in: form component reference documentation

# wx://component-export

Support starts with the base library version {% version ('2.2.3')%}.

Enable custom components to supportexportdefinition segments.This definition can be used to specify the return value of a component when it is called byselectComponent.

Detailed usage and code examples can be found in: selectComponent Reference