最新微信小程序組件間關(guān)系,小程序關(guān)聯(lián)一類(lèi)組件
組件間關(guān)系
定義和使用組件間關(guān)系
有時(shí)需要實(shí)現(xiàn)這樣的組件:
這個(gè)例子中, custom-ul 和 custom-li 都是自定義組件,它們有相互間的關(guān)系,相互間的通信往往比較復(fù)雜。此時(shí)在組件定義時(shí)加入 relations 定義段,可以解決這樣的問(wèn)題。示例:
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'child', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為子節(jié)點(diǎn)
linked: function(target) {
// 每次有custom-li被插入時(shí)執(zhí)行,target是該節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在該節(jié)點(diǎn)attached生命周期之后
},
linkChanged: function(target) {
// 每次有custom-li被移動(dòng)后執(zhí)行,target是該節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在該節(jié)點(diǎn)moved生命周期之后
},
unlinked: function(target) {
// 每次有custom-li被移除時(shí)執(zhí)行,target是該節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在該節(jié)點(diǎn)detached生命周期之后
}
}
},
methods: {
_getAllLi: function(){
// 使用getRelationNodes可以獲得nodes數(shù)組,包含所有已關(guān)聯(lián)的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', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為父節(jié)點(diǎn)
linked: function(target) {
// 每次被插入到custom-ul時(shí)執(zhí)行,target是custom-ul節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在attached生命周期之后
},
linkChanged: function(target) {
// 每次被移動(dòng)后執(zhí)行,target是custom-ul節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在moved生命周期之后
},
unlinked: function(target) {
// 每次被移除時(shí)執(zhí)行,target是custom-ul節(jié)點(diǎn)實(shí)例對(duì)象,觸發(fā)在detached生命周期之后
}
}
}
})
注意:必須在兩個(gè)組件定義中都加入relations定義,否則不會(huì)生效。
關(guān)聯(lián)一類(lèi)組件
有時(shí),需要關(guān)聯(lián)的是一類(lèi)組件,如:
input
custom-form 組件想要關(guān)聯(lián) custom-input 和 custom-submit 兩個(gè)組件。此時(shí),如果這兩個(gè)組件都有同一個(gè)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', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為祖先節(jié)點(diǎn)
}
}
})
// path/to/custom-submit.js
var customFormControls = require('./custom-form-controls')
Component({
behaviors: [customFormControls],
relations: {
'./custom-form': {
type: 'ancestor', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為祖先節(jié)點(diǎn)
}
}
})
則在 relations 關(guān)系定義中,可使用這個(gè)behavior來(lái)代替組件路徑作為關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn):
// path/to/custom-form.js
var customFormControls = require('./custom-form-controls')
Component({
relations: {
'customFormControls': {
type: 'descendant', // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為子孫節(jié)點(diǎn)
target: customFormControls
}
}
})
第二部分:如何開(kāi)通一個(gè)小商店