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

This article mainly introduces the relevant knowledge of "how to define and use the relationship between WeChat Mini Programs components". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to define and use the relationship between WeChat Mini Programs components" can help you solve the problem.

Relationship between components

Define and use relationships between components

Sometimes you need to implement components like this:

Item 1

Item 2

In this example, custom-ul and custom-li are custom components, they have a relationship with each other, and the communication between them is often more complex. This problem can be solved by adding a relations definition segment to the component definition at this time. Example:

/ / path/to/custom-ul.js

Component ({

Relations: {

'. / custom-li': {

Type: 'child', / / the associated target node should be a child node

Linked: function (target) {

/ / executes every time a custom-li is inserted. Target is the node instance object that triggers after the attached life cycle of the node.

}

LinkChanged: function (target) {

/ / every time a custom-li is moved, target is the instance object of the node, which triggers after the moved life cycle of the node

}

Unlinked: function (target) {

/ / executes every time a custom-li is removed. Target is the node instance object that triggers after the detached life cycle of the node.

}

}

}

Methods: {

_ getAllLi: function () {

/ / use getRelationNodes to get the nodes array, which contains all associated custom-li and is ordered.

Var nodes = this.getRelationNodes ('path/to/custom-li')

}

}

Ready: function () {

This._getAllLi ()

}

})

/ / path/to/custom-li.js

Component ({

Relations: {

'. / custom-ul': {

Type: 'parent', / / the associated target node should be the parent node

Linked: function (target) {

/ / executed each time it is inserted into the custom-ul. Target is an instance object of the custom-ul node, which triggers after the attached life cycle.

}

LinkChanged: function (target) {

/ / executed after each move. Target is the custom-ul node instance object, triggered after the moved lifecycle

}

Unlinked: function (target) {

/ / executed each time it is removed. Target is a custom-ul node instance object that triggers after the detached lifecycle.

}

}

}

})

Note: the relations definition must be added to both component definitions, otherwise it will not take effect.

Associate a class of components

Sometimes, you need to associate a class of components, such as:

Input

Submit

The custom-form component wants to associate the custom-input and custom-submit components. At this point, if both components have the same behavior:

/ / path/to/custom-form-controls.js

Module.exports = Behavior ({

/ /...

})

/ / path/to/custom-input.js

Var customFormControls = require ('. / custom-form-controls')

Component ({

Behaviors: [customFormControls]

Relations: {

'. / custom-form': {

Type: 'ancestor', / / the associated target node should be the ancestor node

}

}

})

/ / path/to/custom-submit.js

Var customFormControls = require ('. / custom-form-controls')

Component ({

Behaviors: [customFormControls]

Relations: {

'. / custom-form': {

Type: 'ancestor', / / the associated target node should be the ancestor node

}

}

})

Then in the relations relationship definition, you can use this behavior instead of the component path as the associated target node:

/ / path/to/custom-form.js

Var customFormControls = require ('. / custom-form-controls')

Component ({

Relations: {

'customFormControls': {

Type: 'descendant', / / the associated target node should be a descendant node

Target: customFormControls

}

}

})

This is the end of the introduction on "how to define and use the relationship between WeChat Mini Programs components". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.