Blazor嵌套DxPopup组件双向绑定Visible值同步问题咨询

我有一个嵌套结构的弹窗组件：DetailPopup包裹PopupBase，PopupBase又包裹DevExpress的DxPopup。我期望双向数据绑定能让属性值不仅从父组件传递到子组件，也能从子组件同步回父组件，这个期望是否正确？

以下是我的代码：

PopupBase.razor #

@using DevExpress.Blazor

<DxPopup @bind-Visible="Visible">
</DxPopup>

@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }

}

DetailPopup.razor #

<PopupBase @bind-Visible="Visible">

</PopupBase>

@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }
}

Page.razor #

<DxButton Text="Show Popup" Click="@ShowPopup" />

<DetailPopup @bind-Visible="showPopup" />

@code {
    bool showPopup = false;

    void ShowPopup()
    {
        showPopup = true;
    }
}

@bind-Visible应该启用双向绑定，并自动通过VisibleChanged事件将参数值向上传递给父组件，对吗？父组件的参数是否会自动更新？或者我需要改用@bind-Visible:get/set来实现需求？但我了解到不应覆盖参数值，这让我陷入困惑。当前问题是如果Visible值未正确同步，可能会导致屏幕上出现多个来自不同组件的弹窗。

解答 #

你的双向绑定期望是正确的，但当前代码存在逻辑问题，导致值无法在嵌套组件间正确同步。

问题根源

Blazor的@bind-语法依赖参数属性和对应的{PropertyName}Changed事件回调完成双向同步。但你在PopupBase中直接用@bind-Visible="Visible"绑定DxPopup时，当DxPopup关闭，它会直接修改PopupBase的Visible参数值——而Blazor明确禁止直接修改标记为[Parameter]的属性，这会打破单向数据流规则，同时也不会触发VisibleChanged事件通知父组件更新，最终导致同步失效。

修复方案

修改PopupBase.razor，手动处理DxPopup的VisibleChanged事件，通过自身的VisibleChanged回调向上传递值：

@using DevExpress.Blazor

<DxPopup Visible="@Visible" VisibleChanged="@HandleVisibleChanged">
</DxPopup>

@code {
    [Parameter]
    public bool Visible { get; set; }

    [Parameter]
    public EventCallback<bool> VisibleChanged { get; set; }

    private async Task HandleVisibleChanged(bool newValue)
    {
        // 触发事件回调，通知父组件更新绑定的值
        await VisibleChanged.InvokeAsync(newValue);
    }
}

DetailPopup无需修改，因为它使用@bind-Visible="Visible"绑定PopupBase时，Blazor会自动关联自身的Visible参数和VisibleChanged事件，只要PopupBase正确触发事件，值就能自动向上同步到Page组件的showPopup变量。

关于@bind-Visible:get/set的疑问

你不需要改用@bind-Visible:get/set语法，这种方式适用于需要自定义双向绑定逻辑的场景（比如加校验、转换值等）。你的场景只需要遵循Blazor的单向数据流规则，通过Changed事件传递值即可，基础的@bind-语法完全够用。

核心注意事项

• 永远不要直接修改[Parameter]修饰的属性，必须通过对应的Changed事件通知父组件修改，这是保证组件状态一致的关键。
• 嵌套组件的双向绑定需要每一层都正确传递事件，任何一层未触发Changed事件，都会导致同步链断裂。

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