Blazor 和 EventCallback，都是在父组件中更新数据和运行代码？

Question

我在 Blazor 中有一个父组件和一个子组件。有没有一种更简单的方法可以在父子之间绑定值，并且如果绑定值更改也可以在父级中运行代码？

我有这个代码

家长：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<Test @bind-BitValue="MyValue" BitValueChangedCallback="HandleMyValueChanged"/>

Welcome to your new app.

<br />
MyValue : <span>@MyValue</span> <br />
MyTValue : <span>@MyTValue</span>


@code {
    public int MyValue { get; set; }

    public int MyTValue { get; set; } = 0;

    private void HandleMyValueChanged (int newValue)
    {
        MyTValue = newValue * 2;

    }
}

还有孩子“Test.razor”：

<h3>Test</h3>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


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

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

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

    private async Task IncrementCount()
    {
        BitValue++;
        await BitValueChanged.InvokeAsync(BitValue);
        await BitValueChangedCallback.InvokeAsync(BitValue);
    }
}

如您所见，我在子级中有 2 个 InvokeAsync，一个链接到 Value，另一个触发父级中的方法。有更好的办法解决这个问题吗？

Answer 1

您可以尝试使用

@bind-BitValue:after

将事件绑定到方法：

<h3>Test</h3>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    [Parameter]
    public int BitValue { get; set; }

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

    private async Task IncrementCount()
    {
        BitValue++;
        await BitValueChanged.InvokeAsync(BitValue); 
    }
}

@page "/"
<Test @bind-BitValue="MyValue" @bind-BitValue:after="()=>HandleMyValueChanged(MyValue)" />
<br />
MyValue : <span>@MyValue</span>
<br />
MyTValue : <span>@MyTValue</span>


@code {
    public int MyValue { get; set; }

    public int MyTValue { get; set; } = 0;

    private void HandleMyValueChanged(int newValue)
    {
        MyTValue = newValue * 2;
    }
}