微信小程序開發(fā)組件間關(guān)系
微信小程序組件間關(guān)系
1. 定義和使用組件間關(guān)系
對(duì)于復(fù)雜的自定義組件,組件之間的通訊往往比較困難。在組件定義時(shí)添加 relations 關(guān)系定義段可以解決這個(gè)問題。
示例中的 custom-ul 和 custom-li 都是自定義組件,添加如下關(guā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ì)生效。
2. 關(guān)聯(lián)一類組件
有時(shí)需要關(guān)聯(lián)的是一類組件,這時(shí)可以使用 behavior 進(jìn)行設(shè)置。對(duì)于 custom-form 組件想要關(guān)聯(lián) custom-input 和 custom-submit 兩個(gè)組件,只需讓這兩個(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)
}
}
})
在關(guān)系定義中,可以使用相同的 behavior 來代替具體的組件路徑:
// 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
}
}
})
3. relations 定義段
relations
<本文由himall原創(chuàng),商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明:himall原創(chuàng)>
滿足不同行業(yè)發(fā)展電商的需求,HiMall更有針對(duì)性的提供不同行業(yè)內(nèi)的電商解決方案
-
跨境電商解決方案
支持直郵/保稅模式
對(duì)接海關(guān)/保稅倉
支持多國國際語言
對(duì)接Paypal國際支付
幫助跨境外貿(mào)企業(yè)搭建跨境進(jìn)口/出口電商平臺(tái),搶占國際電商市場(chǎng),針對(duì)企業(yè)需求定制個(gè)性化跨境電商解決方案 -
分賬解決方案
迎合金融監(jiān)管要求
規(guī)避“二清”結(jié)算
節(jié)約平臺(tái)財(cái)務(wù)成本
降低平臺(tái)招商成本
在合法、合規(guī)的前提下,為電商平臺(tái)提供資金收付、賬戶管理、資金合規(guī)等一體化整體解決方案 -
B2B批發(fā)解決方案
多級(jí)階梯批發(fā)價(jià)
布局全渠道批發(fā)入口
專屬批發(fā)訂貨市場(chǎng)
銀聯(lián)B2B大額支付
為企業(yè)快速搭建綜合性B2B批發(fā)電商平臺(tái),整合線下批發(fā)資源,拓展線上批發(fā)渠道,實(shí)現(xiàn)批發(fā)業(yè)務(wù)24小時(shí)在線經(jīng)營
-
MRO工業(yè)品采購平臺(tái)系統(tǒng)|MRO工業(yè)品采購平臺(tái)系統(tǒng)有哪些功能
最新消息:MRO工業(yè)品采購平臺(tái)系統(tǒng) 是一款集產(chǎn)、研、銷于一體的綜合性解決方案,專為解決工業(yè)品企業(yè)的采購難題而設(shè)計(jì)。該系統(tǒng)通過...詳情
-
電子元器件采購商城系統(tǒng)|電子元器件采購商城系統(tǒng)有哪些功能
最新消息:電子元器件采購商城系統(tǒng) 是專為滿足電子元器件行業(yè)復(fù)雜業(yè)務(wù)流程需求而設(shè)計(jì)的綜合性平臺(tái)。它不僅提供了全面的技術(shù)支持...詳情
【本站聲明】
1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識(shí)及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識(shí),請(qǐng)您不要用于其他用途;
2、該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對(duì)于該類商標(biāo)、標(biāo)識(shí)不擁有任何權(quán)利;
3、本網(wǎng)站不對(duì)該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保;
4、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請(qǐng)您直接與該類商品/服務(wù)的提供者聯(lián)系。