Blazor组件复用实战指南（手把手教你封装可重用的C# Blazor组件）

什么是 Blazor 组件？

Blazor 组件是 .razor 文件，它结合了 HTML 标记和 C# 逻辑，可以独立运行并嵌入到其他页面或组件中。通过合理封装，一个组件可以在多个地方重复使用，避免代码冗余，提升开发效率——这就是 Blazor可重用组件 的魅力所在。

第一步：创建一个基础组件

假设我们要封装一个“用户信息卡片”组件，用于在多个页面展示用户头像、姓名和简介。

在你的 Blazor 项目中（如 Blazor Server 或 Blazor WebAssembly），右键点击 Components 或 Pages 文件夹，选择“添加 > Razor 组件”，命名为 UserCard.razor。

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; max-width: 300px;">    <img src="@AvatarUrl" alt="@UserName 的头像"          style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;" />    <h3>@UserName</h3>    <p>@Bio</p></div>@code {    [Parameter]    public string UserName { get; set; } = "匿名用户";    [Parameter]    public string AvatarUrl { get; set; } = "https://via.placeholder.com/60";    [Parameter]    public string Bio { get; set; } = "暂无简介";}

这里我们使用了 [Parameter] 特性来定义组件的输入参数。这样，父组件就可以向 UserCard 传递数据。

第二步：在页面中复用组件

现在，我们可以在任意页面（如 Index.razor）中多次使用这个组件：

<h2>团队成员</h2><UserCard UserName="张三"           AvatarUrl="img/zhangsan.jpg"           Bio="资深前端工程师" /><UserCard UserName="李四"           AvatarUrl="img/lisi.jpg"           Bio=".NET 后端专家" /><UserCard UserName="王五"           AvatarUrl="img/wangwu.jpg"           Bio="UI/UX 设计师" />

是不是非常简洁？通过这种方式，你只需维护 UserCard.razor 一个文件，就能在全站统一风格地展示用户信息，真正实现了 C# Blazor开发 中的高内聚、低耦合。

进阶技巧：支持插槽（Child Content）

有时你希望组件内部能嵌入自定义内容（比如“关注”按钮）。这时可以使用 RenderFragment 实现插槽功能：

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; max-width: 300px;">    <img src="@AvatarUrl" alt="@UserName 的头像"          style="width: 60px; height: 60px; border-radius: 50%;" />    <h3>@UserName</h3>    <p>@Bio</p>        <div>        @ChildContent    </div></div>@code {    [Parameter] public string UserName { get; set; } = "匿名用户";    [Parameter] public string AvatarUrl { get; set; } = "https://via.placeholder.com/60";    [Parameter] public string Bio { get; set; } = "暂无简介";    [Parameter] public RenderFragment? ChildContent { get; set; }}

使用时：

<UserCard UserName="赵六" Bio="产品经理">    <button class="hw2533-ccd6-f44b-77d8 btn btn-primary">关注</button></UserCard>

总结

通过本文的讲解，你应该已经掌握了 Blazor组件复用 的基本方法：创建带参数的组件、在页面中调用、甚至支持自定义内容插槽。这些技巧不仅能让你的代码更整洁，还能大幅提升 Blazor封装教程 中强调的开发效率。

记住，良好的组件设计是构建大型 Blazor 应用的基石。赶快动手试试吧！

SEO关键词提示：本文涵盖的核心关键词包括：Blazor组件复用、Blazor封装教程、C# Blazor开发、Blazor可重用组件。