Blazor实现子组件更新父组件任意类型模型实例属性的方法问询

前置修正 #

你的现有代码需要先调整两处问题保证绑定生效：

• Blazor双向绑定仅支持属性，不支持公共字段，需要把模型定义里的字段改为带{ get; set; }的属性
• 父组件类名拼写错误：Paren改为Parent

修正后的模型代码如下：

public class Customer
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}
public class Arena
{
    public string Name { get; set; }
    public string Location { get; set; }
}

方案1：专用字符串编辑子组件（满足当前需求） #

该方案专门针对字符串类型属性编辑，轻量易用。

第一步：编写子组件 StringEditor.razor #

<!-- 你可以自定义编辑控件的样式、交互逻辑，这里用原生input做示例 -->
<input type="text" value="@Value" @oninput="OnValueUpdate" />

@code {
    // 绑定的属性值
    [Parameter]
    public string Value { get; set; }

    // 值变更回调，Blazor双向绑定约定参数名格式为{参数名}Changed
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    // 可选参数，加了之后支持表单验证场景下的属性识别
    [Parameter]
    public Expression<Func<string>> ValueExpression { get; set; }

    private async Task OnValueUpdate(ChangeEventArgs e)
    {
        Value = e.Value?.ToString();
        // 触发回调通知父组件更新属性
        await ValueChanged.InvokeAsync(Value);
    }
}

第二步：父组件调用 #

在Parent.razor中直接绑定任意模型的字符串属性即可：

<h1>component test</h1>
@if(myArena != null && myCustomer != null)
{
    <div>
        <h3>场馆信息编辑</h3>
        <p>场馆名称：<StringEditor @bind-Value="myArena.Name" /></p>
        <p>场馆地址：<StringEditor @bind-Value="myArena.Location" /></p>

        <h3>客户信息编辑</h3>
        <p>名字：<StringEditor @bind-Value="myCustomer.FirstName" /></p>
        <p>姓氏：<StringEditor @bind-Value="myCustomer.LastName" /></p>
    </div>

    <!-- 测试实时同步效果 -->
    <div style="margin-top:20px;padding:10px;border:1px solid #eee;">
        <h4>父组件实时值</h4>
        <p>场馆名：@myArena.Name | 地址：@myArena.Location</p>
        <p>客户全名：@myCustomer.FirstName @myCustomer.LastName</p>
    </div>
}

方案2：泛型通用编辑子组件（拓展性更强） #

如果后续需要支持编辑数字、日期等其他类型的属性，可以用泛型实现兼容任意类型的通用组件：

@typeparam TValue

<input type="text" value="@Value?.ToString()" @oninput="OnValueUpdate" />

@code {
    [Parameter]
    public TValue Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<TValue>> ValueExpression { get; set; }

    private async Task OnValueUpdate(ChangeEventArgs e)
    {
        // 自动做类型转换，支持数字、日期等常见类型
        var convertedValue = (TValue)Convert.ChangeType(e.Value, typeof(TValue));
        await ValueChanged.InvokeAsync(convertedValue);
    }
}

调用方式和方案1一致，无需修改父组件绑定逻辑。

实现原理 #

Blazor的@bind-[参数名]语法会自动完成双向绑定逻辑：父组件将属性值传递给子组件的对应参数，同时自动订阅子组件的[参数名]Changed事件，子组件修改值后触发事件，父组件会自动更新对应实例的属性值，不受属性所属的模型类型限制，完全满足你任意类任意属性绑定的需求。

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