微信小程序組件間關(guān)系怎么定義和使用

這篇文章主要介紹“微信小程序組件間關(guān)系怎么定義和使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序組件間關(guān)系怎么定義和使用”文章能幫助大家解決問題。

　　組件間關(guān)系

　　定義和使用組件間關(guān)系

　　有時需要實現(xiàn)這樣的組件：

　　item 1

　　item 2

　　這個例子中， custom-ul 和 custom-li 都是自定義組件，它們有相互間的關(guān)系，相互間的通信往往比較復雜。此時在組件定義時加入 relations 定義段，可以解決這樣的問題。示例：

　　// path/to/custom-ul.js

　　Component({

　　relations: {

　　'./custom-li': {

　　type: 'child', // 關(guān)聯(lián)的目標節(jié)點應為子節(jié)點

　　linked: function(target) {

　　// 每次有custom-li被插入時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點attached生命周期之后

　　},

　　linkChanged: function(target) {

　　// 每次有custom-li被移動后執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點moved生命周期之后

　　},

　　unlinked: function(target) {

　　// 每次有custom-li被移除時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點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)的目標節(jié)點應為父節(jié)點

　　linked: function(target) {

　　// 每次被插入到custom-ul時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在attached生命周期之后

　　},

　　linkChanged: function(target) {

　　// 每次被移動后執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在moved生命周期之后

　　},

　　unlinked: function(target) {

　　// 每次被移除時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在detached生命周期之后

　　}

　　}

　　}

　　})

　　注意：必須在兩個組件定義中都加入relations定義，否則不會生效。

　　關(guān)聯(lián)一類組件

　　有時，需要關(guān)聯(lián)的是一類組件，如：

　　input

　　submit

　　custom-form 組件想要關(guān)聯(lián) 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', // 關(guān)聯(lián)的目標節(jié)點應為祖先節(jié)點

　　}

　　}

　　})

　　// path/to/custom-submit.js

　　var customFormControls = require('./custom-form-controls')

　　Component({

　　behaviors: [customFormControls],

　　relations: {

　　'./custom-form': {

　　type: 'ancestor', // 關(guān)聯(lián)的目標節(jié)點應為祖先節(jié)點

　　}

　　}

　　})

　　則在 relations 關(guān)系定義中，可使用這個behavior來代替組件路徑作為關(guān)聯(lián)的目標節(jié)點：

　　// path/to/custom-form.js

　　var customFormControls = require('./custom-form-controls')

　　Component({

　　relations: {

　　'customFormControls': {

　　type: 'descendant', // 關(guān)聯(lián)的目標節(jié)點應為子孫節(jié)點

　　target: customFormControls

　　}

　　}

　　})

關(guān)于“微信小程序組件間關(guān)系怎么定義和使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。