Blazor 子组件如何处理多个父组件级联参数同名冲突问题？

方案1：抽取公共接口（最优实现） #

给两个父组件定义统一的行为接口，子组件只需要声明一个接口类型的级联参数即可，完全符合面向对象的开闭原则，后续新增同类父组件仅需要实现对应接口即可。

1. 首先定义公共接口：

public interface ITaskDetailsContainer
{
    void RemoveTaskDetails();
}

2. 让两个父组件都实现该接口，原有代码不需要修改，仅需要追加接口继承即可：

// TaskList 父组件
public partial class TaskList : ITaskDetailsContainer
{
    // 原有RemoveTaskDetails方法已经满足接口要求
}

// NewTask 父组件
public partial class NewTask : ITaskDetailsContainer
{
    // 原有RemoveTaskDetails方法已经满足接口要求
}

3. 修改子组件的级联参数改为接口类型：

[CascadingParameter]
public ITaskDetailsContainer _Parent { get; set; }

private void ToggleVisibility()
{
    _Parent?.RemoveTaskDetails();
}

方案2：使用EventCallback回调（更轻量的父子通信） #

Blazor原生更推荐用事件回调做父子组件通信，不需要级联传递整个父组件实例，耦合度更低：

1. 父组件调用子组件时直接传递关闭方法作为回调参数：

<TaskDetails 
    TaskId="@AddedTaskId" 
    IsVisible="@IsTaskDetailsVisible"
    OnClose="@RemoveTaskDetails"
></TaskDetails>

2. 子组件声明回调参数直接调用即可：

[Parameter]
public EventCallback OnClose { get; set; }

private async Task ToggleVisibility()
{
    if (OnClose.HasValue)
    {
        await OnClose.InvokeAsync();
    }
}

方案3：给级联值指定唯一名称（现有代码改动最小） #

如果不想改动父组件代码，可以给不同父组件的级联值指定不同的Name属性，子组件分别接收后判断调用：

1. 父组件级联时追加Name属性：

<!-- TaskList 父组件 -->
<CascadingValue Value="this" Name="TaskListParent">
    <div class="col-12 outer-div row">
        <TaskDetails TaskId="@AddedTaskId" IsVisible="@IsTaskDetailsVisible"></TaskDetails>
    </div>
</CascadingValue>

<!-- NewTask 父组件 -->
<CascadingValue Value="this" Name="NewTaskParent">
    <div class="col-12 outer-div row">
        <TaskDetails TaskId="@AddedTaskId" IsVisible="@IsTaskDetailsVisible"></TaskDetails>
    </div>
</CascadingValue>

2. 子组件分别声明两个不同名的级联参数，调用前判断非空：

[CascadingParameter(Name = "TaskListParent")]
public TaskList TaskListParent { get; set; }

[CascadingParameter(Name = "NewTaskParent")]
public NewTask NewTaskParent { get; set; }

private void ToggleVisibility()
{
    TaskListParent?.RemoveTaskDetails();
    NewTaskParent?.RemoveTaskDetails();
}

该方案的缺点是后续新增其他父组件调用子组件时，需要额外追加对应参数，维护成本更高。 #

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