建站
咨詢
售后
建站咨詢
新聞中心
組件間關(guān)系
定義和使用組件間關(guān)系
有時(shí)需要實(shí)現(xiàn)這樣的組件：
我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),微信小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫(kù)的技術(shù)開發(fā)工程師。
item 1
item 2
這個(gè)例子中， custom-ul 和 custom-li 都是自定義組件，它們有相互間的關(guān)系，相互間的通信往往比較復(fù)雜。此時(shí)在組件定義時(shí)加入 relations 定義段，可以解決這樣的問題。示例：
// 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)一類組件
有時(shí)，需要關(guān)聯(lián)的是一類組件，如：
input
submit
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來代替組件路徑作為關(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
}
}
})
relations 定義段
relations 定義段包含目標(biāo)組件路徑及其對(duì)應(yīng)選項(xiàng)，可包含的選項(xiàng)見下表。
| 選項(xiàng) | 類型 | 是否必填 | 描述 |
|---|---|---|---|
| type | String | 是 | 目標(biāo)組件的相對(duì)關(guān)系，可選的值為 parent 、 child 、 ancestor 、 descendant |
| linked | Function | 否 | 關(guān)系生命周期函數(shù)，當(dāng)關(guān)系被建立在頁(yè)面節(jié)點(diǎn)樹中時(shí)觸發(fā)，觸發(fā)時(shí)機(jī)在組件attached生命周期之后 |
| linkChanged | Function | 否 | 關(guān)系生命周期函數(shù)，當(dāng)關(guān)系在頁(yè)面節(jié)點(diǎn)樹中發(fā)生改變時(shí)觸發(fā)，觸發(fā)時(shí)機(jī)在組件moved生命周期之后 |
| unlinked | Function | 否 | 關(guān)系生命周期函數(shù)，當(dāng)關(guān)系脫離頁(yè)面節(jié)點(diǎn)樹時(shí)觸發(fā)，觸發(fā)時(shí)機(jī)在組件detached生命周期之后 |
| target | String | 否 | 如果這一項(xiàng)被設(shè)置，則它表示關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)所應(yīng)具有的behavior，所有擁有這一behavior的組件節(jié)點(diǎn)都會(huì)被關(guān)聯(lián) |
分享標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序組件間關(guān)系
URL標(biāo)題：http://www.dlmjj.cn/article/cdodsoh.html
