溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“微信小程序組件間關系怎么定義和使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序組件間關系怎么定義和使用”文章能幫助大家解決問題。
組件間關系
定義和使用組件間關系
有時需要實現這樣的組件：
這個例子中， custom-ul 和 custom-li 都是自定義組件，它們有相互間的關系，相互間的通信往往比較復雜。此時在組件定義時加入 relations 定義段，可以解決這樣的問題。示例：
// 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生命周期之后
}
}
}
})
注意：必須在兩個組件定義中都加入relations定義，否則不會生效。
關聯一類組件
有時，需要關聯的是一類組件，如：
input
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
}
}
})
關于“微信小程序組件間關系怎么定義和使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
