Blazor自定义组件双向绑定问题：父组件无法获取输入值

算力阿峰

2026-7-15

解决Blazor自定义组件双向绑定不更新父组件值的问题

你的问题根源是自定义组件没有实现Blazor双向绑定要求的回调机制。Blazor的@bind-*语法需要组件提供对应的*Changed回调事件，用来通知父组件更新绑定的值。你的组件只更新了内部的TextValue，但没触发回调通知父组件，所以父组件的TestValue一直停留在初始值。

修改自定义组件`LabeledTextInput`：

需要添加TextValueChanged回调参数，并在值变更时触发它：

<div style="display: inline-block;">
    <label for="@InputId">@LabelText</label>&nbsp;
    <input id="@InputId" @bind-value="TextValue" @bind-value:event="oninput" />
</div>

@code {
    [Parameter]
    public string InputId { get; set; } = string.Empty;

    [Parameter]
    public string LabelText { get; set; } = string.Empty;

    [Parameter]
    public string TextValue { get; set; } = string.Empty;

    // 双向绑定必须的回调参数，命名规则：属性名+Changed
    [Parameter]
    public EventCallback<string> TextValueChanged { get; set; }
}

关键说明：

添加EventCallback<string> TextValueChanged参数：这是Blazor双向绑定的约定，当父组件使用@bind-TextValue时，框架会自动把父组件的属性更新逻辑绑定到这个回调上。
简化input绑定：用@bind-value:event="oninput"替代手动编写@oninput，Blazor会自动处理值更新并触发TextValueChanged回调，无需自己写额外的回调方法。如果坚持手动处理逻辑，可保留原回调并加上await TextValueChanged.InvokeAsync(TextValue)触发通知。