Blazor Server中嵌套组件双向绑定的正确实现模式是什么？

当前实现的问题 #

你的代码确实能实现双向绑定，但属于手动重复实现了Blazor框架已有的双向绑定机制，而且存在明显的类型不匹配bug：内层和外层组件中，PropA是string类型，但对应的PropAChanged事件却是EventCallback<List<string>>，类型不兼容会导致运行时错误。

是否必须显式触发事件冒泡？ #

不是必须的。Blazor的双向绑定基于属性+变更事件的命名约定：只要组件定义了[Parameter] public T PropName { get; set; }和对应的[Parameter] public EventCallback<T> PropNameChanged { get; set; }，就可以直接通过@bind-PropName语法逐层传递绑定，无需手动写@bind-XXX:after和触发事件的方法。

优化后的实现代码 #

内层组件（MyInnerComponent） #

假设第三方VendorComponent符合Blazor双向绑定约定（即拥有PropertyA属性和PropertyAChanged事件），内层组件可以简化为：

<VendorComponent @bind-PropertyA="PropA" />

@code {
    // 与外层组件约定的参数和事件
    [Parameter]
    public string PropA { get; set; }

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

这里@bind-PropertyA="PropA"会自动完成两件事：

1. 将VendorComponent的PropertyA与内层组件的PropA参数绑定
2. 将VendorComponent的PropertyAChanged事件关联到内层组件的PropAChanged回调，自动向上传递变更

外层组件（MyOuterComponent） #

同样遵循约定，无需手动触发事件：

<MyInnerComponent @bind-PropA="PropA" />

@code {
    // 与页面约定的参数和事件
    [Parameter]
    public string PropA { get; set; }

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

页面层 #

保持你的原有写法即可：

<MyOuterComponent @bind-PropA="PropA" />

@code {
    public string PropA { get; set; }    
}

特殊情况：第三方组件不符合约定 #

如果VendorComponent的变更事件不是PropertyAChanged（比如叫OnPropertyAUpdated），这时候才需要手动绑定事件并触发回调，示例如下：

<VendorComponent 
    PropertyA="PropA" 
    OnPropertyAUpdated="HandleVendorPropAChanged" />

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

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

    private async Task HandleVendorPropAChanged(string newValue)
    {
        await PropAChanged.InvokeAsync(newValue);
    }
}

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