---
title: 组件间关系
summary: "介绍如何通过 relations 定义段建立自定义组件间的父子或祖孙关系，实现组件间的关联通信。"
questions:
  - 如何在涂鸦小程序中定义两个自定义组件之间的父子关系？
  - relations 定义段中 type 选项有哪些可选值？
  - 组件间关系的 linked 生命周期函数在什么时机触发？
  - 为什么必须在两个组件中都加入 relations 定义才能生效？
  - unlinked 关系生命周期函数的触发时机与组件的哪个生命周期有关？
  - relations 定义段中 linked 和 unlinked 函数的 target 参数表示什么？
  - 如何通过 relations 实现 custom-ul 和 custom-li 之间的通信？
---

## 定义和使用组件间关系

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

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

这个例子中，`custom-ul` 和 `custom-li` 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时，在组件定义时加入 `relations` 定义段，可以解决这样的问题。示例：

```js
// 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生命周期之后触发
      },
    },
  },
});
```

```js
// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // 关联的目标节点应为父节点
      linked: function (target) {
        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，在custom-ul节点attached生命周期之后触发
      },
      linkChanged: function (target) {
        // 每次被移动后执行，target是custom-ul节点实例对象，在custom-ul节点moved生命周期之后触发
      },
      unlinked: function (target) {
        // 每次被移除时执行，target是custom-ul节点实例对象，在custom-ul节点detached生命周期之后触发
      },
    },
  },
});
```

**注意**：必须在两个组件定义中都加入 `relations` 定义，否则不会生效。

## relations 定义段

`relations` 定义段包含目标组件路径及其对应选项，可包含的选项见下表。

| 选项     | 类型     | 是否必须 | 描述                                                                                       |
| -------- | -------- | -------- | ------------------------------------------------------------------------------------------ |
| type     | String   | 是       | 目标组件的相对关系，可选的值为 `parent`、 `child`、 `ancestor` 和 `descendant`。           |
| linked   | Function | 否       | 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件 `attached` 生命周期之后。 |
| unlinked | Function | 否       | 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件 `detached` 生命周期之后。       |