导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
优维低代码实践连载第15期

《UseBrick》

▽

们在开发中会很容易会遇到构件需要渲染子构件的情况，比如我们的模态框构件需要在里面渲染我们的表格构件，我们的表单容器构件需要渲染我们的单个的表单项构件，这些是通过构件插槽（slots）的形式来实现的，除了插槽我们还有另外一种形式来实现，就是我们今天说的 UseBrick 的能力。

它能够在当前构件中嵌入其他构件显示，当然，能否使用还需要看构件是否支持 useBrick 。有些构件是明确有 useBrick 属性，有些则是定义为其他名称但只要属性的类型有包含 useBrick 字段的都可以使用

我们先来看一个 brick-table 使用的示例


brick: presentational-bricks.brick-tableproperties:  rowKey: id  columns:    - title: 分支      dataIndex: branch      useBrick:        brick: presentational-bricks.brick-link        properties:          label: "<% DATA.cellData %>"    - title: 编号      dataIndex: id    - title: 流水线      dataIndex: pipeline    - title: 状态      dataIndex: status      useBrick:        brick: presentational-bricks.brick-value-mapping        properties:          value: "<% DATA.rowData.status %>"          mapping:            success:              color: green            failed:              color: red            warning:              color: orange        events:          "brick-value-mapping.click":            - action: console.log        dataSource:    list:      - id: "#7220"        pipeline: contract-center / build_giraffe_sdk        branch: develop        status: success      - id: "#7221"        pipeline: container / demo        branch: master        status: failed      - id: "#7222"        pipeline: container / table        branch: feature        status: warning    page: 1    pageSize: 10    total: 3

我们在 columns 里面的 useBrick 定义，他一般的结构为：

  • brick: 表示使用哪个子构件

  • properties：定义子构件的属性，并且可以在子构件的属性中直接消费来自于上级提供的数据源，做一些数据处理后再赋值给属性。对于上述例子中，我们看到 DATA 关键字取的就是 brick-table 提供的 dataSource 数据，cellData 和 rowData 同样也是 brick-table 额外提供的可以方便取当前单元格和当前行的数据值。

  • events：定义子构件的事件

  • slots: 子构件的插槽，有些容器构件是存在插槽的，可以在 useBrick 使用，本示例暂不展示

我们再看下更多示例


brick: presentational-bricks.brick-descriptionsproperties:  itemList:  - text: easyops    label: UserName  - text: '18'    label: Age  - label: Tags    useBrick:      brick: presentational-bricks.brick-tag      properties:        tagList: '<% DATA.tags %>'        configProps:          color: orange        showCard: false  descriptionTitle: User Info  dataSource:    tags:    - user

在 useBrick 中 DATA 关键字都取的是上层构件提供的数据源，在此就是 dataSource 字段提供的信息

「useChildren」

2.1 何为 useChildren

useChildren 这个概念其实只是对 useBrick 的包装，它的出现是为了更方便的在编排中去使用 useBrick ，更直观的去展示构件嵌套构件的层级关系。我们看一下这个示例

当单纯用 useBrick 去配置多层的嵌套关系时，发现需要手动书写较多的代码，并且所有的代码都杂在某一个属性下去维护，比较难以阅读，此时通过 useChildren 就能够把每一个 useBrick 的配置抽离开来，通过插槽的形式单独维护。

2.2 上手 useChildren

使用 useChildren 按如下几步实现：

  • 把使用 useBrick 的地方改成 useChildren 关键字

  • 之前 useBrick 后面跟的是 brick 的配置，改为 useChildren 后配置的是插槽的名称，注意插槽名称需要用中括号包起来这是为了跟我们正常的插槽有所区别形如 `[description]`，这个过程我们可以称之为插槽的定义。

  • 定义好插槽后，就可以在父构件下直接新增构件然后在挂载点填上之前定义的插槽名称即可。

我们拿上面的 brick-table 简单示例转为 useChildren 形式可供参考