# 組件間關系 ## 定義和使用組件間關系 有時需要實現這樣的組件： ``` <custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li> </custom-ul> ``` 這個例子中， `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定義，否則不會生效。** ## 關聯一類組件 有時，需要關聯的是一類組件，如： ``` <custom-form> <view> input <custom-input></custom-input> </view> <custom-submit> submit </custom-submit> </custom-form> ``` `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 } } }) ``` ## relations 定義段 `relations` 定義段包含目標組件路徑及其對應選項，可包含的選項見下表。 | 選項 | 類型 | 是否必填 | 描述 | | ----------- | -------- | ---- | ---------------------------------------- | | type | String | 是 | 目標組件的相對關系，可選的值為 `parent` 、 `child` 、 `ancestor` 、 `descendant` | | linked | Function | 否 | 關系生命周期函數，當關系被建立在頁面節點樹中時觸發，觸發時機在組件attached生命周期之后 | | linkChanged | Function | 否 | 關系生命周期函數，當關系在頁面節點樹中發生改變時觸發，觸發時機在組件moved生命周期之后 | | unlinked | Function | 否 | 關系生命周期函數，當關系脫離頁面節點樹時觸發，觸發時機在組件detached生命周期之后 | | target | String | 否 | 如果這一項被設置，則它表示關聯的目標節點所應具有的behavior，所有擁有這一behavior的組件節點都會被關聯 |