如何在Razor组件中使用DynamicComponent实现双向绑定？

DynamicComponent本身不支持@bind-*这类双向绑定语法糖，但可以通过手动传递值参数和回调参数模拟实现——核心是利用Blazor双向绑定的底层逻辑：把当前值传入组件，同时提供回调方法在值变更时更新父组件状态。

基础实现步骤 #

1. 定义带双向绑定参数的目标组件 #

先写一个简单的输入组件MyInput.razor，暴露标准的双向绑定参数：

<input type="text" 
       value="@Value" 
       @onchange="HandleChange" />

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

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

    private async Task HandleChange(ChangeEventArgs e)
    {
        await ValueChanged.InvokeAsync(e.Value?.ToString());
    }
}

2. 父组件中用DynamicComponent实现双向绑定 #

在父组件里，将Value和ValueChanged传入DynamicComponent的Parameters字典，同时维护父组件自身状态：

<p>当前值: @CurrentValue</p>

<DynamicComponent Type="typeof(MyInput)" 
                  Parameters="@GetDynamicParameters()" />

@code {
    private string? CurrentValue { get; set; } = "初始值";

    private Dictionary<string, object?> GetDynamicParameters()
    {
        return new Dictionary<string, object?>
        {
            // 传入当前值
            { nameof(MyInput.Value), CurrentValue },
            // 传入回调，更新父组件状态
            { nameof(MyInput.ValueChanged), EventCallback.Factory.Create<string?>(this, OnValueChanged) }
        };
    }

    private Task OnValueChanged(string? newValue)
    {
        CurrentValue = newValue;
        return Task.CompletedTask;
    }
}

处理非标准参数名的情况 #

如果目标组件的双向绑定参数不是Value（比如叫Text），只需对应调整参数名：

// 目标组件参数
[Parameter] public string? Text { get; set; }
[Parameter] public EventCallback<string?> TextChanged { get; set; }

// 父组件Parameters字典
return new Dictionary<string, object?>
{
    { "Text", CurrentText },
    { "TextChanged", EventCallback.Factory.Create<string?>(this, OnTextChanged) }
};

注意事项 #

• 遵循Blazor约定：回调参数名必须是值参数名 + Changed；
• 如果需要支持数据验证，可额外传入ValueExpression参数，比如{ "ValueExpression", Expression<Func<string?>>(() => CurrentValue) }；
• 当动态组件类型或参数需动态变更时，确保Parameters字典同步更新，必要时调用StateHasChanged()手动触发组件刷新。

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