组件间关系

　　界说和使用组件间关系

　　有时需要实现这样的组件：

　　 item 1

　　 item 2

　　这个例子中，， 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

　　 submit

　　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

　　}

　　}

　　})