QQ小程序 組件間關(guān)系

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

<custom-ul>
  <custom-li>item 1</custom-li>
  <custom-li>item 2</custom-li>
</custom-ul>

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

// path/to/custom-ul.js
Component({
  relations: {
    './custom-li': {
      type: 'child', // 關(guān)聯(lián)的目標(biāo)節(jié)點應(yīng)為子節(jié)點
      linked(target) {
        // 每次有custom-li被插入時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點attached生命周期之后
      },
      linkChanged(target) {
        // 每次有custom-li被移動后執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點moved生命周期之后
      },
      unlinked(target) {
        // 每次有custom-li被移除時執(zhí)行，target是該節(jié)點實例對象，觸發(fā)在該節(jié)點detached生命周期之后
      }
    }
  },
  methods: {
    _getAllLi() {
      // 使用getRelationNodes可以獲得nodes數(shù)組，包含所有已關(guān)聯(lián)的custom-li，且是有序的
      const nodes = this.getRelationNodes('path/to/custom-li')
    }
  },
  ready() {
    this._getAllLi()
  }
})

// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // 關(guān)聯(lián)的目標(biāo)節(jié)點應(yīng)為父節(jié)點
      linked(target) {
        // 每次被插入到custom-ul時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在attached生命周期之后
      },
      linkChanged(target) {
        // 每次被移動后執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在moved生命周期之后
      },
      unlinked(target) {
        // 每次被移除時執(zhí)行，target是custom-ul節(jié)點實例對象，觸發(fā)在detached生命周期之后
      }
    }
  }
})

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

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

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

<custom-form>
  <view>
    input
    <custom-input></custom-input>
  </view>
  <custom-submit>submit</custom-submit>
</custom-form>

custom-form 組件想要關(guān)聯(lián) custom-input 和 custom-submit 兩個組件。此時，如果這兩個組件都有同一個behavior：

// path/to/custom-form-controls.js
module.exports = Behavior({
  // ...
})

// path/to/custom-submit.js
const customFormControls = require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // 關(guān)聯(lián)的目標(biāo)節(jié)點應(yīng)為祖先節(jié)點
    }
  }
})

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

// path/to/custom-form.js
const customFormControls = require('./custom-form-controls')
Component({
  relations: {
    customFormControls: {
      type: 'descendant', // 關(guān)聯(lián)的目標(biāo)節(jié)點應(yīng)為子孫節(jié)點
      target: customFormControls
    }
  }
})

relations 定義段

relations 定義段包含目標(biāo)組件路徑及其對應(yīng)選項，可包含的選項見下表。