Blazor中如何从组件方法调用带参数的父页面方法？

Blazor 原生提供的EventCallback是该场景的官方推荐实现，无需第三方依赖，支持任意类型数据传递，触发后父页面会自动响应并更新UI，不需要手动调用StateHasChanged。

子组件实现步骤 #

• 为子组件添加带[Parameter]特性的EventCallback类型属性，泛型参数指定你要传递给父级的数据类型
• 在子组件需要通知父级的时机（比如按钮点击、输入值变更、数据加载完成），调用InvokeAsync()方法触发回调，传入要传递的数据

示例子组件ChildForm.razor代码：

<div class="child-component border p-3 mb-3">
    <h4>子组件表单</h4>
    <input @bind="inputContent" class="form-control mb-2" placeholder="输入要传递的内容" />
    <button @onclick="PushDataToParent" class="btn btn-primary">提交到父页面</button>
</div>

@code {
    // 供父页面绑定的事件回调，参数为传递的字符串数据，可替换为任意自定义模型
    [Parameter]
    public EventCallback<string> OnDataPush { get; set; }

    private string inputContent = string.Empty;

    private async Task PushDataToParent()
    {
        // 触发回调，将数据传递给父页面绑定的处理方法
        await OnDataPush.InvokeAsync(inputContent);
    }
}

如果需要实时传递（比如输入框内容变化就立刻通知父级），可以直接在属性的set访问器里触发回调，不需要按钮点击：

<input @bind="inputContent" @bind:event="oninput" class="form-control mb-2" />

@code {
    [Parameter]
    public EventCallback<string> OnDataPush { get; set; }

    private string _inputContent = string.Empty;
    private string inputContent
    {
        get => _inputContent;
        set
        {
            _inputContent = value;
            // 值变化立刻触发回调
            _ = OnDataPush.InvokeAsync(_inputContent);
        }
    }
}

父页面实现步骤 #

• 在父页面中引用子组件时，对子组件暴露的EventCallback参数绑定本地的处理方法
• 在处理方法中编写数据接收后的响应逻辑即可，方法参数类型和子组件传递的数据类型保持一致

示例父页面Index.razor代码：

@page "/"

<div class="parent-page p-3">
    <h1>父页面</h1>
    <div class="alert alert-success">
        实时收到子组件数据：@receivedData
    </div>

    <!-- 引用子组件，绑定回调处理方法 -->
    <ChildForm OnDataPush="ProcessChildData" />
</div>

@code {
    private string receivedData = "暂未收到子组件数据";

    // 子组件触发事件时自动执行的响应方法
    private async Task ProcessChildData(string dataFromChild)
    {
        // 这里写任意响应逻辑：更新UI、调用接口、触发其他组件更新都可以
        receivedData = dataFromChild;
        await Task.CompletedTask;
    }
}

扩展说明 #

• 传递复杂结构化数据时，直接将EventCallback的泛型参数替换为自定义的模型类即可，比如EventCallback<UserInfo>、EventCallback<OrderDetail>
• 该方案仅适用于直接父子层级的组件通信，如果是跨多层级的组件通信，可考虑级联参数、作用域状态管理服务等方案
• 不要使用静态变量、自定义全局事件做简单父子通信，容易引发内存泄漏、UI不更新的问题

内容的提问来源于stack exchange，提问作者Frank Mehlhop