腾讯云小程序平台组件间关系-开发指南-文档中心-腾讯云

定义和使用组件间关系
有时需要实现这样的组件：
<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(target) {
        // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
      },
      linkChanged(target) {
        // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后
      },
      unlinked(target) {
        // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后
      }
    }
  },
  methods: {
    _getAllLi() {
      // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的
      const nodes = this.getRelationNodes('path/to/custom-li')
    }
  },
  ready() {
    this._getAllLi()
  }
})
// path/to/custom-li.js
Component({
  relations: {
    './custom-ul': {
      type: 'parent', // 关联的目标节点应为父节点
      linked(target) {
        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
      },
      linkChanged(target) {
        // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后
      },
      unlinked(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
const customFormControls = require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // 关联的目标节点应为祖先节点
    }
  }
})
// path/to/custom-submit.js
const customFormControls = require('./custom-form-controls')
Component({
  behaviors: [customFormControls],
  relations: {
    './custom-form': {
      type: 'ancestor', // 关联的目标节点应为祖先节点
    }
  }
})
则在relations关系定义中，可使用这个 behavior 来代替组件路径作为关联的目标节点：
// path/to/custom-form.js
const 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 的组件节点都会被关联
﻿

选项	类型	是否必填	描述
type	string	是	目标组件的相对关系，可选的值为 parent 、 child 、 ancestor 、 descendant
linked	function	否	关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件 attached 生命周期之后
linkChanged	function	否	关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件 moved 生命周期之后
unlinked	function	否	关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件 detached 生命周期之后
target	string	否	如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一 behavior 的组件节点都会被关联

组件间关系

本页目录：

定义和使用组件间关系

关联一类组件

relations 定义段