---
title: Inter-component Relationship
---

## Define and use inter-component relationship

You may need to implement the following componentslike this in certain scenarios:

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

In this example, `custom-ul` and `custom-li` are custom components that are mutually related and communicate with each other in a complex manner. In this case, you can add the `relations` definition field to component definitions. Example:

```js
// path/to/custom-ul.js
Component({
  relations: {
    './custom-li': {
      type: 'child', // The linked target node should be a child node
      linked: function (target) {
        // Executed each time custom-li is inserted. "target" is the instance object of this node and triggered after the attached lifecycle of this node.
      },
      linkChanged: function (target) {
        // Executed each time custom-li is moved. "target" is the instance object of this node and triggered after the moved lifecycle of this node.
      },
      unlinked: function (target) {
        // Executed each time custom-li is removed. "target" is the instance object of this node and triggered after the detached lifecycle of this node.
      },
    },
  },
});
```

```js
// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // The linked target node should be a parent node
      linked: function (target) {
        // Executed after each insertion to custom-ul. "target" is the instance object of the custom-ul node and triggered after the attached lifecycle of the custom-ul node.
      },
      linkChanged: function (target) {
        // Executed after each move. "target" is the instance object of the custom-ul node and triggered after the moved lifecycle of the custom-ul node.
      },
      unlinked: function (target) {
        // Executed after each removal. "target" is the instance object of the custom-ul node and triggered after the detached lifecycle of the custom-ul node.
      },
    },
  },
});
```

**Note**: The `relations` definition must be added to the definitions of both components. Otherwise, it will be invalid.

## Definition field of relations

The `relations` definition field includes the target component path and its corresponding options. The following table lists the available options.

| Option | Data type | Required | Description |
| -------- | -------- | -------- | -------------------------------- |
| type | String | Yes | The relative relationship of the target component, including `parent`, `child`, `ancestor`, and `descendant`. |
| linked | Function | No | A relationship lifecycle function. This function is triggered when the relationship is created in the page node tree after the `attached` lifecycle of the component. |
| unlinked | Function | No | A relationship lifecycle function. This function is triggered when the relationship is removed from the page node tree after the `detached` lifecycle of the component. |