Blazor无显性触发条件下子组件向父组件传递Costs值的实现问题

要在父组件中获取子组件的Costs值，核心是在子组件的依赖值（_selectedVariant）变化时，自动触发CostsChanged回调通知父组件。以下是具体实现方式：

1. 子组件修改：监听依赖值变化并触发回调 #

子组件的Costs由_selectedVariant决定，所以我们需要在_selectedVariant更新时，主动计算最新Costs并通知父组件。可以通过给_selectedVariant添加带逻辑的属性setter来实现：

<h3>Child component</h3>
<!-- 绑定到带逻辑的属性，而非直接绑定私有字段 -->
<Grandchild @bind-SelectedVariant="SelectedVariant" />
<h4>Costs: @Costs</h4>

@code {
    private string _selectedVariant;

    // 带setter逻辑的属性，监听_selectedVariant变化
    private string SelectedVariant
    {
        get => _selectedVariant;
        set
        {
            if (_selectedVariant != value)
            {
                _selectedVariant = value;
                // 计算最新Costs并通知父组件
                _ = CostsChanged.InvokeAsync(Costs);
            }
        }
    }

    // 双向绑定约定：Costs属性 + CostsChanged回调
    public int Costs => GetCosts();
    
    [Parameter]
    public EventCallback<int> CostsChanged { get; set; }

    // 原有的Costs计算逻辑
    private int GetCosts()
    {
        // 示例：根据选中的变体返回对应成本，替换为你的实际逻辑
        return _selectedVariant switch
        {
            "Variant 1" => 120,
            _ => 0
        };
    }
}

2. 父组件保持现有绑定逻辑 #

父组件无需额外修改，@bind-Costs会自动接收子组件通过CostsChanged传递的最新值：

<h3>Parent component</h3>
<Child @bind-Costs="_costs" />
<p>父组件获取到的成本：@_costs</p>

@code {
    private int _costs;
}

3. 孙组件优化（可选） #

孙组件中调用SelectedVariantChanged后，Blazor会自动触发组件树重新渲染，无需手动调用StateHasChanged()，可以移除该代码：

<h3>Grandchild component</h3>
<input type="checkbox" @onclick="(e) => ToggleCheckboxAsync("Variant 1")" />

@code {
    [Parameter] public string SelectedVariant { get; set; } = "";
    [Parameter] public EventCallback<string> SelectedVariantChanged { get; set; }

    private async Task ToggleCheckboxAsync(string clickedVariantName)
    {
        await SelectedVariantChanged.InvokeAsync(clickedVariantName);
        // 移除多余的StateHasChanged();
    }
}

原理说明 #

当孙组件勾选复选框时，会通过SelectedVariantChanged通知子组件更新SelectedVariant；子组件的属性setter检测到值变化后，计算最新Costs并通过CostsChanged回调传递给父组件，最终父组件的_costs字段自动更新。

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