Blazor组件参数绑定向上游传递的实现方法咨询

嘿，我看了你的代码，问题出在中间组件TestComponentB没有正确触发参数变化的回调，导致最上层的Home组件接收不到参数更新。Blazor的双向绑定@bind本质上是「参数+对应Changed回调」的语法糖，所以当中间组件的参数变化时，必须手动触发它的Changed回调，才能把更新传递到上游。

下面是修改后的完整代码，保证输入框的内容能从最内层的TestComponentA一路同步到最上层的Home组件：

TestComponentA.razor（你的原有代码没问题，直接保留） #

<div style="border: 1px solid; padding: 4px;">
    <input @bind-value=this.TestParamA />
    Test Param A: @this.TestParamA
</div>

@code {
    [Parameter]
    public string TestParamA { get; set; } = null!;

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

TestComponentB.razor（关键修改在这里） #

<div style="border: 1px solid; padding: 4px;">
    <TestComponentA @bind-TestParamA=this.TestParamB></TestComponentA>
    Test Param B: @this.TestParamB
</div>

@code {
    private string _testParamB = null!;

    [Parameter]
    public string TestParamB
    {
        get => _testParamB;
        set
        {
            if (_testParamB != value)
            {
                _testParamB = value;
                // 触发回调，通知上游Home组件参数已更新
                _ = TestParamBChanged.InvokeAsync(value);
            }
        }
    }

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

Home.razor（把字段改成属性更符合Blazor最佳实践） #

@page "/"

<PageTitle>Home</PageTitle>

<div style="border: 1px solid; padding: 4px;">
    <TestComponentB @bind-TestParamB=this.TestParamC></TestComponentB>
    Test Param C: @this.TestParamC
</div>

@code {
    public string TestParamC { get; set; } = "45";
}

为什么这样修改能解决问题？ #

• Blazor的@bind-XXX语法糖会自动关联XXX参数和XXXChanged回调，但中间组件作为参数接收方，当内部参数因子组件更新而变化时，必须主动触发自身的Changed回调，才能让父组件感知到变化。
• 给TestParamB添加带逻辑的setter，是为了在参数值真正改变时，自动调用回调通知上游，避免手动在多个地方重复写触发逻辑。
• Home组件把字段改成属性是推荐做法，虽然字段也能临时工作，但属性更符合组件参数的设计规范，也方便后续扩展逻辑。

现在你再运行代码，在TestComponentA的输入框里输入内容，TestParamA→TestParamB→TestParamC会实时同步更新，完美实现从最内层到最上层的参数传递。

备注：内容来源于stack exchange，提问作者hamstar