微信小程序開發(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)>