May 17, 2021 WeChat Mini Program Development Document
Sometimes it is necessary to implement components such as:
<custom-ul>
<custom-li> item 1 </custom-li>
<custom-li> item 2 </custom-li>
</custom-ul>
In this example, custom-ul and custom-li are custom components that have relationships with each other and often communicate more complexly with each other. Y ou can solve this problem by adding a relations definition segment to the component definition. Example:
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'child', // 关联的目标节点应为子节点
linked: function(target) {
// 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后
},
linkChanged: function(target) {
// 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后
},
unlinked: function(target) {
// 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后
}
}
},
methods: {
_getAllLi: function(){
// 使用getRelationNodes可以获得nodes数组,包含所有已关联的custom-li,且是有序的
var nodes = this.getRelationNodes('path/to/custom-li')
}
},
ready: function(){
this._getAllLi()
}
})
// path/to/custom-li.js
Component({
relations: {
'./custom-ul': {
type: 'parent', // 关联的目标节点应为父节点
linked: function(target) {
// 每次被插入到custom-ul时执行,target是custom-ul节点实例对象,触发在attached生命周期之后
},
linkChanged: function(target) {
// 每次被移动后执行,target是custom-ul节点实例对象,触发在moved生命周期之后
},
unlinked: function(target) {
// 每次被移除时执行,target是custom-ul节点实例对象,触发在detached生命周期之后
}
}
}
})
Note: The system definition must be included in both component definitions, otherwise it will not take effect.
Sometimes, a class of components needs to be associated, such as:
<custom-form>
<view>
input
<custom-input></custom-input>
</view>
<custom-submit> submit </custom-submit>
</custom-form>
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', // 关联的目标节点应为祖先节点
}
}
})
// path/to/custom-submit.js
var customFormControls = require('./custom-form-controls')
Component({
behaviors: [customFormControls],
relations: {
'./custom-form': {
type: 'ancestor', // 关联的目标节点应为祖先节点
}
}
})
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', // 关联的目标节点应为子孙节点
target: customFormControls
}
}
})
The relations definition segment contains the target component path and its corresponding options, which can be included in the table below.
Options | Type | Is it required | Describe |
---|---|---|---|
type | String | Is |
The relative relationship of the target component, with optional
parent
child
ancestor
descendant
|
linked | Function | Whether | A relationship lifecycle function that triggers when a relationship is established in a page node tree, after the component's attached lifecycle |
linkChanged | Function | Whether | A relationship lifecycle function that triggers when a relationship changes in the page node tree, triggered after the component's moved lifecycle |
unlinked | Function | Whether | A relationship lifecycle function that triggers when a relationship is detached from the page node tree, triggered after the component's detached lifecycle |
target | String | Whether | If this item is set, it represents the behavior that the associated target node should have, and all component nodes that own the behavior are associated |