Blazor组件渲染时能否实现双向绑定自动更新父组件值？

可行，你可以通过调整子组件的生命周期方法并添加防循环逻辑来实现需求，具体代码和说明如下：

修改后的父组件（无需改动） #

@page "/parent-component"
<ChildComponent @bind-Name="@name" />
<h1>@name</h1>
@code {
  private string name = "Hugo";
}

修改后的子组件 #

@code {
  [Parameter]
  public string Name { get; set; }
  [Parameter]
  public EventCallback<string> NameChanged { get; set; }

  // 标记是否已执行过初始化处理，避免无限循环
  private bool _hasProcessed = false;

  protected override async Task OnParametersSetAsync()
  {
    // 仅在首次加载且Name未被处理过时执行
    if (!_hasProcessed && !string.IsNullOrWhiteSpace(Name) && !Name.StartsWith("Hi "))
    {
      var updatedName = $"Hi {Name}";
      // 调用回调通知父组件更新值
      await NameChanged.InvokeAsync(updatedName);
      _hasProcessed = true;
    }
  }
}

关键说明 #

1. 生命周期方法选择：用OnParametersSetAsync而非OnInitializedAsync，因为前者会在参数首次传递或后续变化时触发，能覆盖更多场景；如果只需要首次渲染处理，通过_hasProcessed标志位控制即可。
2. 防无限循环：调用NameChanged.InvokeAsync后，父组件更新name值，会再次传递给子组件的Name参数，此时如果没有判断逻辑，会重复执行处理逻辑导致循环。通过_hasProcessed或检查Name是否已包含“Hi ”前缀，就能避免这个问题。
3. 参数修改规范：不要直接修改[Parameter]标记的Name属性（Blazor不建议直接修改参数），而是生成新值后通过回调传递给父组件，由父组件更新源数据，再同步回子组件。

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