双向数据绑定的数据传播

Question

我有一个弹出组件，它包装了一个弹出基本组件，该组件又包装了

DxPopup

(DevExpress)。通过双向数据绑定，我希望属性值不仅从父级传递到子级，而且还从子级传递到父级。这种期望是错误的吗？这是我的代码：

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

事件将参数值推送到父级，对吧？或者没有？那么，parents中的参数是否应该自动更新呢？ 或者我是否需要切换到

@bind-Visible:get/set

来完成我想要的。但即便如此，我读到我们不应该覆盖参数值，所以这也让我不知所措。

问题是，如果可见性设置不正确，那么我们最终可能会在屏幕上出现多个弹出窗口（来自不同的组件）。

Answer 1

双向绑定不会自动使用 VisibleChanged 事件将参数值推送到父级。 当改变child内部的值时，同时需要手动调用事件，将事件（带参数值）传递给parent。

PopupBase.razor

<DxPopup @bind-Visible="Visible">
    <sapn>Content inside popup</sapn>
    <DxButton Text="Change Visible inside popup" Click="ChangeVisible_and_TriggerEvent" />
</DxPopup>


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

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

    private async Task ChangeVisible_and_TriggerEvent()
    {
        Visible = !Visible;
        await VisibleChanged.InvokeAsync(Visible);
    }
}