# Relationship between components

# Define and use relationships between components

Sometimes it is necessary to implement components like this:

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

In this example, custom and custom-li Are custom components, they have a relationship with each other, and communication between them is often more complex. At this point when the component definition is added relations Definition paragraph, can solve such problems. Example:

{% Minicode ('0kfvzKm56NZy') %}

// path/to/custom-ul.js
Component({
  relations: {
    './custom-li': {
      type: 'child', // The associated target node should be a child node
      linked: function(target) {
        // Each time a custom-li is inserted, the target is the node instance object, the trigger is after the life cycle of the node attached
      },
      linkChanged: function(target) {
        // Each time a custom-li is moved after execution, the target is the node instance object, the trigger after the node moved life cycle
      },
      unlinked: function(target) {
        // Each time a custom-li is removed, the target is the node instance object, the trigger is after the node detached life cycle
      }
    }
  },
  methods: {
    _getAllLi: function(){
      // Using getRelationNodes, you can get an array of nodes, containing all the associated custom-li, ordered
      var nodes = this.getRelationNodes('path/to/custom-li')
    }
  },
  ready: function(){
    this._getAllLi()
  }
})

// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // The associated target node should be the parent node
      linked: function(target) {
        // Executed each time it is inserted into custom-ul, the target is the custom-ul node instance object, triggered after the life cycle of the attached
      },
      linkChanged: function(target) {
        // Each time it is executed after being moved, the target is the custom-ul node instance object, triggered after the life cycle of the moved
      },
      unlinked: function(target) {
        // Executed each time it is removed, the target is the custom-ul node instance object, triggered after the detached life cycle
      }
    }
  }
})

Note: Relations definitions must be added to both component definitions, otherwise they will not take effect.

# Associating a class of components

{% Minicode ('LFEVaqmh6zYU') %}

Sometimes it is a class of components that need to be associated, such as:

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

custom-form Component wants to associate custom-input and custom-submit Two components. At this point, if both components have the same 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', // The associated target node should be the ancestor node
    }
  }
})

// path/to/custom-submit.js
var customFormControls = Require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // The associated target node should be the ancestor node
    }
  }
})

Is in the relations In the relationship definition, you can use this behavior instead of the component path as the target node of the association:

// path/to/custom-form.js
var customFormControls = Require('./custom-form-controls')
Component({
  relations: {
    'customFormControls': {
      type: 'descendant', // The associated target node should be a descendant node
      target: customFormControls
    }
  }
})

# relations Definition paragraph

relations The definition segment contains the target component path and its corresponding options, which can be included in the following table.

to make a choice	type	Is required	describe
type	String	yes	The relative relationship of the target component, with an optional value of `parent` 、 `child` 、 `ancestor` 、 `descendant`
linked	Function	no	The relationship life periodic function, which is triggered when a relationship is established in the page node tree, after the component's attached life cycle
linkChanged	Function	no	The relationship life periodic function, which is triggered when the relationship changes in the page node tree after the component moved life cycle
unlinked	Function	no	The relationship life periodic function, which is triggered when the relationship leaves the page node tree after the component detached life cycle
target	String	no	If this entry is set, it represents the behavior that the associated target node should have, and all component nodes that have this behavior are associated