Blazor中如何向自定义组件传递@bind-Value实现双向绑定

1. 修改自定义InputTextComponent组件 #

你的自定义组件目前仅支持单向传值，要实现双向绑定，必须添加两个核心参数：ValueChanged（值变化回调）和ValueExpression（用于表单验证支持）。修改后的组件代码如下：

<div class="form-group">
    <label for="Name">Name</label>
    <InputText @bind-Value="@Value" />
</div>

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

    // 值变化时触发的回调，通知父组件更新数据
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    // 用于EditForm表单验证的表达式，必须添加才能支持验证逻辑
    [Parameter]
    public Expression<Func<string>> ValueExpression { get; set; }
}

也可以手动绑定InputText的事件，效果完全一致：

<div class="form-group">
    <label for="Name">Name</label>
    <InputText Value="@Value" @oninput="async (e) => await ValueChanged.InvokeAsync(e.Value.ToString())" />
</div>

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

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

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

2. 在Index.razor中使用双向绑定 #

将原来的单向传值语法Value="data.Name"替换为Blazor双向绑定语法@bind-Value="data.Name"：

@page "/"

<EditForm model="@data" OnValidSubmit="OnClickBtn">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>
    <div class="modal-body">
      <InputTextComponent @bind-Value="data.Name"/>
    </div>
    <div class="modal-footer justify-content-between">
        <button type="button" >Cancel</button>
        <button type="submit" class="btn btn-primary">OK</button>
       
    </div>
</EditForm>
@code{
    public class Item
    {
        public string Name { get; set; } = string.Empty;
    }
    private Item data { get; set; } = new Item(){ Name="John"};
    private void OnClickBtn()
    {
        // 此时data.Name已同步更新为输入框中的内容
        string updatedName = data.Name;
    }
}

核心原理 #

Blazor的@bind-Value是语法糖，会自动展开为三个部分：

• 向子组件传递Value参数
• 绑定ValueChanged回调，当子组件内部值变化时，自动更新父组件的绑定属性
• 传递ValueExpression参数，用于EditForm的表单验证和错误提示逻辑

你原来的代码仅定义了Value参数，缺少ValueChanged回调，导致子组件无法通知父组件更新数据，最终出现值不同步的问题。

内容的提问来源于stack exchange，提问作者Nguyễn Văn Huy