翻译自 Waqas Anwar 2021年3月19日的文章 《A Beginner’s Guide to Blazor Components》
Blazor 应用程序是组件的组合，这些组件不仅负责呈现用户界面，还协同工作以促进用户交互。它们是 Blazor 应用程序的主要构建块，大多数 Blazor 功能都是围绕组件展开的。在本教程中，我将向您详细介绍组件，并向您展示在 Blazor 应用程序中创建和使用组件的多种技术。
下载源码
Blazor 组件概述Blazor 组件是 UI 的一个自包含部分，例如一个页面、一个侧边栏菜单、一个联系人表单或仪表盘小工具等。它包括用于呈现 UI 的 HTML 标签和用于处理数据或处理用户事件的 C# 代码。组件可以相互嵌套，也可以在项目中重用，甚至可以跨多个项目重用。Blazor 组件是作为 Razor 组件实现的，这正是它们使用 Razor 语法并具有 .razor 文件扩展名的原因。
为了理解 Blazor 组件的结构及其工作方式，让我们回顾一下 Counter.razor 组件（如果您在 Visual Studio 2019 中使用 Blazor App 模板，它会自动为我们生成）。下面是 Counter.razor 的完整代码。
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }文件中的第一行使用了 Razor @page 指令来指定组件的路由。这意味着 Counter 组件是页面级或可路由组件，可以在浏览器中使用 URL 末尾的 /counter 路径来访问它。如果我们不指定 @page 指令，则该组件将变为子组件，可以通过将其嵌套在其他组件中来使用它。
@page "/counter"如下所示，我们还可以声明多个 @page 级别的指令。这将允许我们使用两个 URL 访问组件。
@page "/counter" @page "/mycounter"在 @page 指令之后，是用于指定该组件 UI 的 HTML 标记。这些标记可以使用 Razor 语法动态地使用表达式、条件或循环来渲染 HTML。在上述的 Counter 组件示例中，其 UI 包含一个标题 (h1)、一个段落 (p) 和一个按钮 (button) 元素。段落 (p) 元素使用 Razor 语法来输出 C# 代码块中定义的 currentCount 变量的值。
<p>Current count: @currentCount</p>按钮 (button) 元素通过调用方法 IncrementCount 来响应用户单击操作，该方法也定义在代码块中。
<button @onclick="IncrementCount">Click me</button>最后，是一个代码块，每次调用 IncrementCount 方法时，我们简单地将 currentCount 变量的值加 1。
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }当 Blazor 应用程序进行编译时，HTML 标记和 C# 代码将转换成一个组件类，类名称与组件的文件名相对应。该类的成员是我们在 @code 中定义的相同的变量和方法。允许使用多个 @code 块，所有这些代码块在编译后会合并进同一组件类。
在 Visual Studio 2019 中创建 Blazor 组件如果您要创建一个页面级组件，请右键单击 Pages 文件夹并选择 添加 > Razor 组件... 菜单选项。
您也可以在解决方案资源管理器中右键单击项目名称，然后使用 Razor 组件 模板创建一个组件。
让我们创建一个文件名为 Calculator.razor 的组件，并添加以下代码。
Calculator.razor
@page "/calculator" <h3>Calculator</h3> <div> <label for="number1">Number 1</label> <input type="number" @bind="number1"> </div> <div> <label for="number2">Number 2</label> <input type="number" @bind="number2"> </div> <div> <label><b>Total: </b>@total</label> </div> <button @onclick="Calculate">Calculate</button> @code { private int number1 = 0; private int number2 = 0; private int total = 0; private void Calculate() { total = number1 + number2; } }