Blazor中父组件向子组件通信：获取子组件输入值的方法

针对你的需求，这里提供两种可行的实现方式，适配不同场景：

方案一：通过组件引用直接读取值 #

这种方式适合简单场景，直接获取子组件的内部状态：

步骤1：修改NewItemComponent，公开输入值 #

将子组件的CurrentValue设为公开属性，让父组件可以访问：

<!-- NewItemComponent.razor -->
Enter Item Name <input type="text" class="form-control textbox-parameters" @bind="CurrentValue" >

@code { 
    public string CurrentValue { get; set; } = "New Item"; 
}

步骤2：在MainPage中引用子组件并读取值 #

给子组件添加@ref标记，在保存时直接获取其属性值：

<!-- MainPage.razor -->
<NewItemComponent @ref="newItemComponent"></NewItemComponent> 
<Save OnSaveClick="HandleSaveClick"></Save>

@code {
    private NewItemComponent? newItemComponent;
    
    private void HandleSaveClick()
    {
        // 获取子组件的输入值
        string? itemName = newItemComponent?.CurrentValue;
        // 执行保存逻辑，比如输出或提交到后端
        Console.WriteLine($"保存的项目名称：{itemName}");
    }
}

方案二：通过EventCallback实时同步值（推荐） #

这种方式遵循Blazor单向数据流的设计理念，实时将子组件的输入同步到父组件，更适合复杂业务场景：

步骤1：修改NewItemComponent，添加回调参数 #

定义EventCallback参数，在输入值变化时通知父组件：

<!-- NewItemComponent.razor -->
Enter Item Name <input type="text" class="form-control textbox-parameters" @bind="CurrentValue" >

@code { 
    private string _currentValue = "New Item";
    
    // 定义回调参数，用于向父组件传递值
    [Parameter]
    public EventCallback<string> OnItemNameChanged { get; set; }

    public string CurrentValue
    {
        get => _currentValue;
        set
        {
            if (_currentValue != value)
            {
                _currentValue = value;
                // 通知父组件值已变更
                _ = OnItemNameChanged.InvokeAsync(value);
            }
        }
    }
}

步骤2：在MainPage中接收同步值并使用 #

维护父组件内部的状态变量，通过回调实时更新，保存时直接使用该变量：

<!-- MainPage.razor -->
<NewItemComponent OnItemNameChanged="UpdateItemName"></NewItemComponent> 
<Save OnSaveClick="HandleSaveClick"></Save>

@code {
    private string currentItemName = "New Item";
    
    // 接收子组件传来的新值，更新父组件状态
    private void UpdateItemName(string newValue)
    {
        currentItemName = newValue;
    }

    private void HandleSaveClick()
    {
        // 直接使用已同步的currentItemName
        Console.WriteLine($"保存的项目名称：{currentItemName}");
    }
}

方案对比 #

• 方案一：实现简单，适合快速开发简单功能，但直接访问子组件内部状态，耦合度较高。
• 方案二：符合Blazor的组件设计原则，单向数据流降低耦合，支持实时响应输入变化，推荐用于大多数业务场景。

内容的提问来源于stack exchange，提问作者Gokul S