Blazor父子组件如何绑定整个自定义模型类而非逐个属性绑定

现有实现的核心问题 #

• 模型定义与组件类耦合：你把模型逻辑嵌套在InputLength组件类内部，且参数直接使用组件自身类型作为模型，更新模型属性时会触发Blazor的参数重校验逻辑，导致组件被意外重建、触发循环更新
• 状态冗余：组件内部额外维护了_Length、_SelectedLengthType两份本地字段，和传入模型的属性重复，且SelectedLengthType的set方法没有同步更新模型的对应属性，会出现状态不一致
• 无变更校验：相同值重复赋值会触发无意义的回调，加重循环更新问题

最优实现方案 #

核心思路是把模型类从组件中独立抽离，利用引用类型的特性，子组件直接修改传入模型的属性，仅通过回调通知父组件触发重渲染即可，不需要维护多余的本地状态。

步骤1：抽离独立模型类 #

单独创建模型类文件，不要嵌套在组件内部：

// InputLengthModel.cs
public class InputLengthModel
{
    public double Length { get; set; }
    public LengthType SelectedLengthType { get; set; }

    public enum LengthType
    {
        Inches,
        Centimeters
    }
}

步骤2：简化子组件实现 #

组件不需要维护额外本地字段，UI直接绑定模型属性，变更后触发回调即可：

@* InputLength.razor 组件UI部分示例 *@
<input type="number" @bind="Model.Length" @bind:after="TriggerModelChange" />
<select @bind="Model.SelectedLengthType" @bind:after="TriggerModelChange">
    @foreach (var type in Enum.GetValues<InputLengthModel.LengthType>())
    {
        <option value="@type">@type</option>
    }
</select>

@code {
    [Parameter]
    public InputLengthModel Model { get; set; }
    [Parameter]
    public EventCallback<InputLengthModel> ModelChanged { get; set; }

    private async Task TriggerModelChange()
    {
        await ModelChanged.InvokeAsync(Model);
    }
}

步骤3：父组件绑定 #

直接绑定模型实例即可，所有属性变更会自动同步：

@* 父组件代码 *@
<InputLength @bind-Model="inputLengthInstance" />

@code {
    // 父组件持有的模型实例
    private InputLengthModel inputLengthInstance = new();
}

额外优化 #

如果你的场景不需要父组件在模型变更时立刻触发重渲染，甚至可以去掉ModelChanged回调，因为引用类型的属性修改会直接作用在父组件持有的实例上，父组件任意后续重渲染都会自动拿到最新值，进一步简化代码。

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