# 递归组件

自定义组件只需要简单配置即可递归使用。

在自定义组件的 .json 配置文件中，添加 name 字段，并指定名称，则可以在自定义组件中使用此字段的值作为组件名。如:

my-layer.json

{
  "name": "my-layer",
  "component": true
}

1
2
3
4

my-layer.js

Component({
  properties: {
    depth: {
      type: Number,
      value: 1
    }
  }
})

1
2
3
4
5
6
7
8

my-layer.qxml

<view class='my-layer'>
  this is layer {{ depth }}
  <my-layer qa:if='{{ depth > 1 }}' depth='{{ depth - 1 }}'></my-layer>
</view>

1
2
3
4

# 全局组件

app.json 中配置配置的组件，也可以作为递归组件使用。如：

app.json

{
  "usingComponents": {
    "global-layer": "./components/global-layer/global-layer"
  }
}

1
2
3
4
5

global-layer.js

Component({
  properties: {
    depth: {
      type: Number,
      value: 1
    }
  }
})

1
2
3
4
5
6
7
8

global-layer.qxml

<view class='global-layer'>
  this is layer {{ depth }}
  <global-layer qa:if='{{ depth > 1 }}' depth='{{ depth - 1 }}'></global-layer>
</view>

1
2
3
4

以上是两种组件的使用使用如：

page.qxml

<view>
  <my-layer depth='{{ 3 }}'></my-layer>
  <global-layer depth='{{ 3 }}'></global-layer>
</view>

1
2
3
4

注意

使用递归组件时，需要注意使用条件控制递归，否则可能会出现无限循环，出现 “max stack size exceeded” 的错误。

←

→

在线客服