Blazor基础知识：创建Blazor组件

目录

什么是Blazor组件？

使用预先存在的控件

Blazor模板语法

Blazor应用程序中的页面

组件树：分层组件组合

将参数从父组件传递到子组件

结论

---

开始使用Blazor时，首先需要了解的是组件。了解如何创建组件、使用模板以及将参数从父组件传递到子组件。

Blazor应用程序由多层组件组成。Blazor中的所有内容都是一个组件。

面向组件的体系结构具有许多优点，例如简单的代码重用、独立编程和可组合性，甚至可以跨多个Blazor应用程序。

我将Blazor应用程序中的组件分为三类：页面、组件和控件。从技术上讲，它们都是Blazor组件。它们组合在一起，生成一个组件树，从而生成Blazor应用程序。

什么是Blazor组件？

Blazor组件有两个主要部分：模板和交互代码。该模板使用标准的Web技术，例如HTML和CSS。交互代码是用C#实现的。

<h1>@Title</h1>

@code {
	public string Title { get; set; } = "My Component";
}

这个简单组件包含一个带有单个<h1> HTML元素的模板。<h1>元素的内容引用组件模板下方@code块中C#代码的Title属性。

输出变量的值非常简单。我们可以使用@符号后跟组件代码节中定义的属性名称。

当我们想引用组件@code部分的代码时，我们可以在模板中的任何位置使用@符号。

使用预先存在的控件

上面的示例包含一个简单的<h1>标签。但是，在实际应用中，组件变得更加复杂。

这个想法是通过将组件限制为单个职责来保持组件尽可能小。例如，表单组件处理表单交互，但不为表单中的每个字段定义模板。

一些用例很常见，构建的组件可以跨多个应用程序使用。可以生成组件，这非常耗时，也可以依赖第三方UI控件库，例如 Telerik UI for Blazor UI组件库。

这样可以腾出时间专注于构建应用程序，而不必担心实现低级控制组件，例如美观的复选框或进度条控件。

Blazor模板语法

Blazor基于ASP.NET Core Razor Pages引入的Razor语法构建。

如果你熟悉该语法，你将很快适应Blazor语法。如果您完全不熟悉语法，请不要担心，它非常简单。

Blazor应用程序中的页面

在Blazor中，页面是组件。要将上一个示例的组件转换为页面，我们唯一需要做的就是添加@page指令。

@page "/MyPage"
<h1>@Title</h1>

@code {
	public string Title { get; set; } = "My Component";
}

简单的Blazor组件模型允许我们通过添加@page指令将组件转换为页面。在此示例中，我们使用/MyPage路由作为可访问页面的路由。

该@page指令将组件注册为页面，并将路由添加到ASP.NET Core路由提供程序。

组件树：分层组件组合

现在，我们了解了什么是Blazor组件以及如何实现它，以及如何将Blazor组件转换为页面，我们想要生成一个有意义的组件树。

我们将代码提取到一个MyComponent.razor文件中，并添加一个包含MyComponent的MyPage.razor文件。生成的代码如下所示：

MyPage.razor：

@page "/MyPage"
<MyComponent />

MyComponent.razor：

<h1>@Title</h1>

@code {
	public string Title { get; set; } = "My Component";
}

我们用五行代码创建了两个组件，并在MyPage组件中引用了该MyComponent组件。

我们可以继续使用相同的模式来构建一整棵组件树，所有组件都引用其他组件。

例如，页面可以包含Content组件和Menu组件。然后，菜单组件包含一些MenuItem组件，依此类推。

将参数从父组件传递到子组件

有时我们想重用组件的实现，但需要为每个实例提供特定的数据。

使用Blazor时，我们只需添Parameter加属性即可将属性转换为可从组件外部设置的参数。

例如，MyComponent可以将其更改为如下所示：

<h1>@Title</h1>

@code {
	[Parameter]
	public string Title { get; set; }
}

我们接受来自父组件的标题，而不是为所有组件实例设置相同的Title属性值。

在父组件中，在我们的例子中是MyPage组件，我们现在在模板中引用组件时为Title属性添加一个值。

@page "/MyPage"
<MyComponent Title="MyTitle" />

如你所见，在使用Blazor组件时，定义和提供从一个组件到另一个组件的参数非常简单。

结论

Blazor组件构建Blazor应用程序的基础。每个Blazor应用程序都由一堆Blazor组件组成，这些组件使用简单的HTML模板粘合在一起。

我们可以使用@符号来引用Blazor组件中的C#代码，以将静态HTML模板转换为功能组件。

有一些高级主题，例如高级路由、组件之间的通信、绑定数据、处理事件等等。但这一切都基于这个基础。

若要详细了解Blazor开发，可以在 YouTube上观看我的免费 Blazor速成课程。敬请期待 转到Telerik博客，了解更多 Blazor基础知识。

https://www.telerik.com/blogs/blazor-basics-creating-blazor-component