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

In this article, the editor introduces "how to define and use behaviors" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to define and use behaviors" article can help you solve your doubts.

Behaviors

Define and use behaviors

Behaviors is a feature for code sharing between components, similar to "mixins" or "traits" in some programming languages.

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data, and methods are merged into the component, and lifecycle functions are called at the corresponding time. Each component can reference multiple behavior. Behavior can also reference other behavior.

Behavior needs to be defined using the Behavior () constructor.

Code example:

/ / my-behavior.js

Module.exports = Behavior ({

Behaviors: []

Properties: {

MyBehaviorProperty: {

Type: String

}

}

Data: {

MyBehaviorData: {}

}

Attached: function () {}

Methods: {

MyBehaviorMethod: function () {}

}

})

When referencing components, you can list them one by one in the behaviors definition section.

Code example:

/ / my-component.js

Var myBehavior = require ('my-behavior')

Component ({

Behaviors: [myBehavior]

Properties: {

MyProperty: {

Type: String

}

}

Data: {

MyData: {}

}

Attached: function () {}

Methods: {

MyMethod: function () {}

}

})

In the above example, my-behavior is added to the my-component component definition, while my-behavior contains the myBehaviorProperty property, the myBehaviorData data field, the myBehaviorMethod method, and an attached lifecycle function. This will eventually make the my-component contain two properties myBehaviorProperty and myProperty, two data fields myBehaviorData and myData, and two methods myBehaviorMethod and myMethod. When a component triggers the attached lifecycle, the attached lifecycle function in my-behavior and the attached lifecycle function in my-component are triggered in turn.

Rules for covering and combining fields

The component and the behavior it references can contain fields with the same name, and these fields can be handled as follows:

If there is a property or method with the same name, the property or method of the component itself will override the property or method in the behavior. If more than one behavior is referenced, the property or method at the end of the behavior in the definition section will override the preceding property or method.

If there is a data field with the same name, if the data is an object type, the objects will be merged, and if it is a non-object type, they will overwrite each other.

Lifecycle functions do not cover each other, but are called one by one at the corresponding trigger time. If the same behavior is referenced multiple times by a component, the lifecycle functions it defines will only be executed once.

Built-in behaviors

Custom components can obtain some behavior of the built-in components by referencing the built-in behavior.

Code example:

Component ({

Behaviors: ['wx://form-field']

})

In the above example, wx://form-field represents a built-in behavior that makes this custom component behave like a form control.

Built-in behavior tends to add properties to components. In the absence of special instructions, a component can override these properties to change its type or add an observer.

After reading this, the article "how to define and use behaviors" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, 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.