优维低代码：构件 slot 说明

Posted 2022-06-21 优维科技EasyOps

导语

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

---

在上一篇《优维低代码：构件事件传递》的技术分享中，我们分享了构件间传递事件常见的业务场景，以及分布调用的方式。下面，我们来讲讲有关容器构件的slot机制。

  "brick": "basic-bricks.micro-view",
  "injectDeep": true,
  "slots": 
    "titleBar": 
      "type": "bricks",
      "bricks": [
        
          "brick": "basic-bricks.page-title",
          "injectDeep": true,
          "properties": 
            "pageTitle": "APP 管理"
          
        
      ]
    ,
    "content": 
      "type": "bricks",
      "bricks": [
        ...
      ]
    
  

有些容器构件是提供了 slot 机制的，也即是构件的插槽。插槽的意思是这个构件提供了子构件插入的能力，但插入点的位置会由父构件决定，插槽点用名称来表示。比如 basic-bricks.micro-view 就提供了 3 个插槽：titleBar、toolbar、content，表示左上角标题位置，右上角工具栏位置，内容位置，具体可查看说明文档。

如下为 basic-bricks.micro-view 的插槽示意图：

# div 也有 slot

  "brick": "div",
  "slots": 
    "": 
      "type": "routes",
      "routes": [
        ...
      ]
    
  

大伙在 demo 示例中会看到有不少上述写法，也会有疑问：

• div 为啥可以有 slots
• slot 的 key 为啥可以是 ""

解释：其实任何构件都可以有 slot ，如果 slot 名字在构件中找不到定义的话，框架也一样会渲染，按 html 流式布局（从左往右从上往下）排布。因为之前我们 storyboard 编排时候不支持“路由直接嵌套子路由”，所以为了一些代码的复用（比如 sidebar）和路由层级更好，故会特意新增一个 div 的层级，而 slot 一般就写成了 ""

另外：“路由直接嵌套子路由”在新的版本支持了，具体见：RouteConf

  "path": "/xxx",
  "type": "routes",
  "routes": [
    
      "path": "/xxxx/a",
      "bricks": []
    ,
    
      "path": "/xxxx/b",
      "bricks": []
    
  ]

以上就是今天关于优维低代码的分享，希望对你有所收获！