Blazor 创建自定义组件的方法

10次阅读

Blazor自定义组件通过创建.razor文件实现,包含html模板、C#逻辑(@code块)和scoped css;使用[Parameter]接收参数,EventCallback触发事件,无需注册即可直接使用。

Blazor 创建自定义组件的方法

Blazor 中创建自定义组件非常直接,核心就是写一个 .razor 文件,里面包含 HTML 模板、C# 逻辑和可选的 CSS 样式(支持 scoped CSS)。组件本质是可复用的 ui 单元,能接收参数、触发事件、封装状态。

基础组件:从 .razor 文件开始

Shared 或任意文件夹下新建文件(如 MyButton.razor),内容如下:

  • 使用 @code { } 块写 C# 成员(字段、属性、方法)
  • 直接写 HTML 标记作为渲染模板,支持 Razor 语法(如 @onclick@if
  • 组件名默认取文件名(首字母大写),无需注册,Blazor 编译器自动识别

接收参数:用 [Parameter] 特性

让组件可配置的关键。在 @code 块中声明 public 属性,并加上 [Parameter]

  • 支持普通类型(Stringint)、泛型(TValue)、组件类型(RenderFragment)
  • 必需参数可用 [Parameter] public string Label { get; set; } = default!; + 非空约束
  • 子内容用 [Parameter] public RenderFragment? ChildContent { get; set; } 接收

触发交互:定义 EventCallback

组件内部调用 EventCallback.InvokeAsync() 向父组件发通知:

  • 声明:[Parameter] public EventCallback OnClick { get; set; }
  • 在按钮点击等时机调用:await OnClick.InvokeAsync();
  • 支持带参回调,如 EventCallback OnInput,调用时传值即可

样式与作用域:使用 @Namespace 和 scoped CSS

避免样式污染,推荐启用 scoped CSS:

  • 新建 MyButton.razor.css(同名 + .css 后缀),内容自动作用于该组件
  • 在组件顶部加 @namespace Myapp.Components 明确命名空间,方便跨页面引用
  • 如需全局样式,仍可用 wwwroot/css/site.css 或

    块(不推荐)

基本上就这些。不需要手动注册,不依赖第三方库,改完保存就能在其他 .razor 文件里像 HTML 标签一样用 —— 比如

text=ZqhQzanResources