Blazor中InputButton组件实现双向绑定的解决方案

要实现InputButton组件与父组件的双向数据同步，核心是利用Blazor的双向绑定机制，通过「参数+对应EventCallback」的组合实现值的双向传递，具体步骤如下：

1. 修改InputButton子组件 #

在子组件中，除了定义Val参数，还需添加一个名为ValChanged的EventCallback<decimal>，用于在值变化时通知父组件更新。同时调整输入框的绑定逻辑：

@code {
    [Parameter]
    public decimal Val { get; set; }

    [Parameter]
    public EventCallback<decimal> ValChanged { get; set; }
}

<input @bind="Val" @bind:event="onchange" />
<button>@Val</button>

注：@bind语法糖会自动关联Val参数和ValChanged回调，无需手动写值变更逻辑；如果需要自定义值校验，也可以手动处理onchange事件，解析输入值后再调用ValChanged.InvokeAsync(newValue)。

2. 父组件中使用双向绑定 #

在父组件中，将原来的Val="abc"替换为@bind-Val="abc"，即可实现双向同步：

@code {
    private decimal abc = 0;
    private decimal bcd = 0;
}

<input @bind-value="abc"/>
<button>@abc</button>
<br />

<input @bind-value="bcd"/>
<button>@bcd</button>
<br />

<InputButton @bind-Val="abc" />

原理说明 #

Blazor的@bind-X是语法糖，会自动拆解为两个逻辑：

• 将父组件的变量值传递给子组件的X参数
• 将子组件的XChanged回调绑定到父组件的变量更新逻辑

当子组件修改输入框值时，会通过XChanged通知父组件更新对应变量；父组件变量更新后，又会同步回子组件，最终实现双向数据同步。

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