Blazor 组件怎么创建

Blazor组件以.razor文件形式存在，包含@page、HTML模板和@code块三部分；可通过标签名复用，需注意命名空间和大小写；支持@namespace和@inherits增强组织性与可扩展性。

Blazor 组件通常以 .razor 文件形式存在，本质是带 HTML 模板和 C# 逻辑的混合文件，创建方式简单直接。

在 Visual Studio 或 VS Code 中新建 .razor 文件

右键项目（通常是 Pages、Components 或自定义文件夹）→ 选择“添加” → “新建项” → 找到“Razor 组件”模板（Visual Studio）或手动新建文本文件并命名为 MyComponent.razor（VS Code）。确保扩展名是 .razor，不是 .cs 或 .html。

基础结构：@page + HTML + @code

一个最简 Blazor 组件至少包含三部分：

• @page "/my-component" —— 可选，仅当需要作为页面路由时添加；组件复用时不加
• 纯 HTML 标记（支持 Razor 语法，如 @value、@if）
• @code { ... } 块 —— 放 C# 成员（字段、属性、方法）、生命周期方法（如 OnInitialized）

示例：

Hello, @Name!

@if (IsVisible)
{
    
Content is shown.

}

@code {
    private string Name = "Blazor";
    private bool IsVisible = true;
}

组件复用：通过标签名调用

保存为 Counter.razor 后，可在其他组件中像 HTML 标签一样使用：。注意大小写敏感，且组件名需匹配文件名（首字母大写惯例）。若组件不在同一命名空间，需在父组件顶部加 @using YourApp.Components。

可选但推荐：使用 @namespace 和 @inherits

在组件顶部加 @namespace MyApp.Components 明确命名空间；如需继承自自定义基类（比如封装通用状态），可用 @inherits MyBaseComponent，前提是基类继承自 ComponentBase。

基本上就这些 —— 不需要配置、不依赖额外命令，新建文件 + 写点 HTML 和 C#，就能跑起来。