Blazor布局中的插槽：如何定义自定义插槽？

Blazor完全支持定义类似内置@Body的自定义内容插槽，你示例中的@AdditionalUpperFixedContent、@AdditionalSidebarContent、@AdditionalFloatingContent就是标准的实现方式，核心是通过**RenderFragment类型的组件参数**来实现。

实现步骤 #

1. 在布局/组件中声明自定义插槽参数
   在MainLayout.razor的代码块里，添加RenderFragment类型的参数，这些参数就是自定义插槽的“容器”：

@code {
    // 顶部固定区域的自定义插槽
    [Parameter]
    public RenderFragment? AdditionalUpperFixedContent { get; set; }

    // 侧边栏的自定义插槽
    [Parameter]
    public RenderFragment? AdditionalSidebarContent { get; set; }

    // 浮动区域的自定义插槽
    [Parameter]
    public RenderFragment? AdditionalFloatingContent { get; set; }
}

2. 在布局模板中引用自定义插槽
   直接在对应位置使用@参数名插入自定义内容，也就是你给出的布局结构：

<div class="MainLayout">
  
  <div class="MainLayout-UpperFixedContentSlot">
    <Header hamburgerMenuButtonAdditionalCSS_Class="MainLayout-HamburgerMenuButton" />
    @AdditionalUpperFixedContent
  </div>
  
  <div class="MainLayout-Sidebar">
    <NavigationMenu />
    @AdditionalSidebarContent
  </div>
  
  <main class="MainLayout-SpecificContent">
    @Body
  </main>

  <Snackbar/>  
  <BlockingLoadingOverlay/>
  @AdditionalFloatingContent
  
</div>

使用自定义插槽 #

当页面或父组件使用这个布局时，有两种方式传入自定义内容：

方式一：直接赋值参数

@layout MainLayout

@{
    AdditionalUpperFixedContent = @<div>自定义顶部导航右侧按钮</div>;
    AdditionalSidebarContent = @<div>侧边栏底部的用户信息卡片</div>;
    AdditionalFloatingContent = @<div>全局悬浮的反馈按钮</div>;
}

<h1>我的首页内容</h1>
<p>这是页面的主内容，会被渲染到@Body的位置</p>

方式二：组件子内容语法（更直观）

<MainLayout>
    <AdditionalUpperFixedContent>
        <button class="btn-primary">全局搜索</button>
    </AdditionalUpperFixedContent>
    <AdditionalSidebarContent>
        <div class="sidebar-footer">
            <p>版权所有 © 2024</p>
        </div>
    </AdditionalSidebarContent>
    <AdditionalFloatingContent>
        <div class="float-btn">回到顶部</div>
    </AdditionalFloatingContent>

    <!-- 这里的内容就是@Body对应的主内容 -->
    <h1>我的首页内容</h1>
    <p>这是页面的主内容</p>
</MainLayout>

原理说明 #

Blazor内置的@Body本质就是框架预定义的一个RenderFragment参数，专门用于承载页面的主内容。而我们自定义的RenderFragment参数，和@Body的工作逻辑完全一致，只是名字和用途由我们自己定义，用来灵活扩展布局或组件的可自定义内容区域。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD