本文介绍如何在自定义 Blazor 组件（如 ）中正确暴露并响应 @onclick 事件，使父组件能通过 OnClick 参数绑定点击处理逻辑，实现跨组件事件传递。

本文介绍如何在自定义 blazor 组件（如 ``）中正确暴露并响应 `@onclick` 事件，使父组件能通过 `onclick` 参数绑定点击处理逻辑，实现跨组件事件传递。

在 Blazor 中，自定义组件默认不继承 HTML 元素的原生事件（如 @onclick），因此不能像原生

那样直接在组件标签上使用 @onclick。必须显式声明 EventCallback 参数，并在组件内部将 DOM 点击事件转发给该回调。

正确实现步骤

1. 在组件中声明 EventCallback 参数
   使用 [Parameter] public EventCallback OnClick { get; set; } 声明可被父组件绑定的事件回调（注意：参数名应为 OnClick，而非 @onclick —— Blazor 会自动将 OnClick 映射为 @onclick 的语法糖）。

2. 在 Razor 模板中绑定内部元素的 @onclick
   将点击事件附加到根

   上，并调用私有处理方法触发 EventCallback：

   <!-- DataRow.razor -->
   <div>
       @ChildContent
   </div>

   3. 在代码隐藏中实现事件转发逻辑
      OnClicked 方法需为 async Task，并调用 OnClick.InvokeAsync()。即使处理函数是同步的（如 void MyClickFun()），也应使用 InvokeAsync 以确保兼容性与生命周期安全：

   // DataRow.razor.cs
   public partial class DataRow
   {
       [Parameter]
       public RenderFragment? ChildContent { get; set; }
   
       [Parameter]
       public EventCallback OnClick { get; set; }
   
       private async Task OnClicked(MouseEventArgs e) 
           => await OnClick.InvokeAsync(e);
   }

   ✅ 注意：InvokeAsync(e) 会自动适配接收 MouseEventArgs 或无参的父级处理方法（Blazor 自动解包）。若父组件方法签名是 void MyClickFun()，则 e 会被忽略；若为 void MyClickFun(MouseEventArgs e)，则参数将正确传递。

   父组件使用方式

   在父组件中，直接使用 OnClick 属性（而非 @onclick）绑定事件处理方法：

   <!-- Parent.razor -->
   <datarow onclick="MyClickFun"><p>这是自定义行内容</p>
   </datarow>
   
   @code {
       private void MyClickFun()
       {
           Console.WriteLine("DataRow 被点击了！");
           // 可执行导航、状态更新、API 调用等逻辑
       }
   }

   补充说明

   • ❌ 错误写法： —— 这会导致编译错误，因为 DataRow 未声明 @onclick 对应的 EventCallback 参数。
   • ✅ 推荐命名：统一使用 OnClick（PascalCase）作为参数名，符合 Blazor 官方约定，支持 IDE 智能提示和 @onclick 语法糖解析。
   • ? 扩展性：可依此模式添加 OnDoubleClick、OnKeyDown 等其他事件，保持组件接口清晰、职责单一。

   通过以上方式，DataRow 成为一个可交互、可复用、符合 Blazor 事件模型的封装组件，既保持语义化结构，又无缝集成事件系统。