构件 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 示例中会看到有不少上述写法，也会有疑问：

1. div 为啥可以有 slots
2. slot 的 key 为啥可以是 ""

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

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

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