Blazor 双向绑定和父级中的值更改事件

Question

当子控件中的属性发生更改时，使用双向数据绑定在父控件中触发回调的推荐方法是什么？

我尝试过以下操作，但它没有触发 HandleValueChanged。有没有传统的方法可以在父级中触发OnValueChanged？

父组件

@page "/parent"

<h3>Parent Component</h3>

<ChildComponent @bind-Value="parentValue" @bind-Value:after="HandleValueChanged" />

<p>Parent Value: @parentValue</p>

@code {
    private int parentValue = 0;

    private void HandleValueChanged()
    {
        // Handle the value change event here
        Console.WriteLine($"Value changed to: {parentValue}");
    }
}

子组件

<h3>Child Component</h3>

<input type="number" @bind="Value" />

@code {
    [Parameter]
    public int Value { get; set; }

    [Parameter]
    public EventCallback<int> ValueChanged { get; set; }

    private async Task OnValueChanged(ChangeEventArgs e)
    {
        Value = int.Parse(e.Value.ToString());
        await ValueChanged.InvokeAsync(Value);
    }
}

Answer 1

子组件内的

OnValueChanged

永远不会被执行，这意味着父组件根本不会收到新属性值的通知，而不仅仅是

HandleValueChanged

不执行。您还应该注意到，当子级的输入元素更改时，

<p>Parent Value: @parentValue</p>

不会更新为新值。

是否有常规方法可以在父级中触发OnValueChanged？

child组件需要执行

OnValueChanged

（或者更准确地说，子组件是需要执行

ValueChanged.InvokeAsync()

的组件）。

我不太确定你想用

Value = int.Parse(e.Value.ToString());

行来完成什么。当您已经绑定时，似乎不需要携带

Value

。

这是更新后的子组件代码：

<input type="number" @bind="Value" @bind:after="OnValueChanged" />

private async Task OnValueChanged()
{
    await ValueChanged.InvokeAsync(Value);
}

您可以使用

:after

和

@bind

属性，而不是在子级中执行

value=

（和

onchange=

），但您有责任在委托中更新

Value

。这就是

:after

的要点 - 它仍然允许您进行 2 向数据绑定（您不需要自己手动更新属性），但您仍然可以在更新绑定后触发一个方法来运行。