组件间关系

定义和使用组件间关系

有时需要实现这样的功能：

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

多层级自定义组件需要互相通信，实现起来比较复杂，这个时候可以使用 relations 字段解决。

// path/to/custom-ul.js
Component({
  relations: {
    "./custom-li": {
      type: "child", // The associated target node should be a child node
      linked(target) {
        // Every time a custom-li is inserted, the target is the node instance object, triggered after the node attached life cycle
      },
      linkChanged(target) {
        // Every time a custom-li is moved, the target is the node instance object, triggered after the node moved life cycle
      },
      unlinked(target) {
        // Executed every time a custom-li is removed, target is the node instance object, triggered after the node detached life cycle
      },
    },
  },
  methods: {
    _getAllLi() {
      // Use getRelationNodes to get the nodes array, which contains all the associated custom-li, and is ordered
      this.getRelationNodes("path/to/custom-li", (nodes) => {
        // do something
      });
    },
  },
  ready() {
    this._getAllLi();
  },
});

// path/to/custom-li.js
Component({
  relations: {
    "./custom-ul": {
      type: "parent", // The associated target node should be the parent node
      linked(target) {
        // Executed every time it is inserted into custom-ul, target is a custom-ul node instance object, triggered after the attached life cycle
      },
      linkChanged(target) {
        // Executed after each move, target is a custom-ul node instance object, triggered after the removed life cycle
      },
      unlinked(target) {
        // Executed each time it is removed, target is a custom-ul node instance object, triggered after the detached life cycle
      },
    },
  },
});

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

关联一类组件

有时，需要关联的是一类组件，如：

<custom-form>
  <view>
    <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", // The associated target node should be an ancestor node
    },
  },
});

// path/to/custom-submit.js
const customFormControls = require("./custom-form-controls");
Component({
  behaviors: [customFormControls],
  relations: {
    "./custom-form": {
      type: "ancestor", //The associated target node should be an ancestor node
    },
  },
});

则在 relations 关系定义中，可使用这个 behavior 来代替组件路径作为关联的目标节点：

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

relations 定义段

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

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

点击纠错

评价此篇文档

组件间关系
定义和使用组件间关系
关联一类组件
relations 定义段