Brick Next 中如何正确传递 slot 内容到自定义构件？

这问题我也遇到过，多半是 slot 没配置对。先检查下你的 brick 构件定义文件，确保 slot 配置正确。

在 my-custom-card.tsx 里，除了用 <slot></slot> 标签，还得在 props 里声明 slots 属性。给你个能用的代码模板：

import { defineBrick } from 'brick-next';



export default defineBrick({

  // 其他配置...

  render(props, slots) {

    return (

      <div className="custom-card">

        {slots.default}

      </div>

    )

  }

});

重点是 {slots.default} 这行，把默认 slot 内容渲染出来。再看看 storyboard 里的写法，确认没写错标签名就行。

我以前也是在这卡半天，复制这个试试，应该就能看到内容了。记得清理缓存刷新页面，低代码平台有时会缓存旧版本。

啊这个问题我踩过坑！根本原因是 Brick Next 对 slot 的处理和原生 Web Components 有些细微差别。让我详细解释下：

首先确认你的构件注册方式是否正确。Brick Next 要求用 defineComponent 声明式注册，而不是直接继承 HTMLElement。正确的构件定义应该是这样的：

// my-custom-card.js

defineComponent({

  template: 

    <div class="card">

      <slot></slot>

    <div>

  

});

然后重点来了，Brick Next 的 slot 内容需要用特殊的 brick-slot 属性标记，而不是直接写在标签里。你的 storyboard 应该改成：

<my-custom-card>

  <div brick-slot="">

    <div class="card-header">标题</div>

    <p>这里是内容</p>

  </div>

</my-custom-card>

为什么这样设计？因为 Brick Next 的渲染引擎需要明确区分哪些是构件的属性，哪些是 slot 内容。那个空的 brick-slot 属性就是标记用的。

还有几个常见踩坑点：
1. 确保你的构件在 storyboard 的 useBricks 里正确引用了
2. slot 内容必须包裹在一个根元素里（上面例子中的 div）
3. 如果 slot 有命名，需要同时设置 brick-slot 和 slot 属性

如果还是不行，建议检查构件是否正常加载了。可以在构件代码里加个 console.log 调试下。这个机制确实有点反直觉，我第一次用的时候也折腾了好久。