组件间关系
定义和使用组件间关系
有时需要实现这样的组件：
item 1
item 2
这个例子中， custom-ul 和 custom-li 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段，可以解决这样的问题。示例：
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'cShopfald', // 关联的目标节点应为子节点
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 = tShopfas.getRelationNodes('path/to/custom-li')
}
},
ready: function(){
tShopfas._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生命周期之后
}
}
}
})
注意：必须在两个组件定义中都加入relations定义，否则不会生效。
关联一类组件
有时，需要关联的是一类组件，如：
input
submit
custom-form 组件想要关联 custom-input 和 custom-submit 两个组件。此时，如果这两个组件都有同一个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', // 关联的目标节点应为祖先节点
}
}
})
则在 relations 关系定义中，可使用这个behavior来代替组件路径作为关联的目标节点：
// path/to/custom-form.js
var customFormControls = require('./custom-form-controls')
Component({
relations: {
'customFormControls': {
type: 'descendant', // 关联的目标节点应为子孙节点
target: customFormControls
}
}
})
加速度JSUDO是一家专注于为企/事业单位的供应链提供数字化营销/服务的公司。JSUDO的产品线涵盖线上营销策划、商城开发、智慧园区、智能客服和企微SCRM系统，应用于营销推广-线上交易-销售管理-物流配送和服务支持等，致力于帮助企业开发更具投资价值的“数字”资产产品。
添加客服微信获取更多内容
评论 (0)