Blazor中如何将子组件只读属性的更新同步到父组件？

要让父组件自动更新子组件的只读属性值，核心是让子组件在属性变化时通知父组件触发重渲染，具体实现如下：

1. 子组件添加事件通知
   在ChildComponent.razor的@code块中定义一个事件，用于在Total值变化时通知父组件，并在修改选中项的逻辑后触发该事件：

   @for (int i = 0; i < 10; i++)
   {
       int i1 = i;
       <input type="checkbox" @onchange="v => OnSelect((bool)v.Value, i1)"/>
   }
   <br/>
   Child Total: @Total
   @code {
       public List<int> SelectedItems { get; set; } = new List<int>();
       public int Total => SelectedItems.Sum();
       // 定义通知事件
       public event Action OnTotalChanged;
   
       public void OnSelect(bool selected, int index)
       {
           if (selected)
           {
               SelectedItems.Add(index);
           }
           else
           {
               SelectedItems.Remove(index);
           }
           // 触发事件通知父组件
           OnTotalChanged?.Invoke();
       }
   }
   

2. 父组件绑定事件并触发重渲染
   在Parent.razor中给子组件绑定OnTotalChanged事件，收到通知后调用StateHasChanged()强制父组件重新渲染，从而更新显示的Total值：

   @page "/"
   
   <ChildComponent @ref="Child" OnTotalChanged="UpdateParentDisplay"/>
   <br/>
   Parent Total: @(Child?.Total ?? 0)
   @code {
       public ChildComponent Child { get; set; }
   
       private void UpdateParentDisplay()
       {
           StateHasChanged();
       }
   }
   

修改完成后，每当子组件复选框状态变化导致Total值改变时，子组件会立即通知父组件重新渲染，父组件就能同步显示最新的Total值。

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