Blazor子组件属性变更时，如何通过双向绑定触发父组件回调？

你的代码中HandleValueChanged未触发的核心问题：子组件同时使用了@bind="Value"和自定义OnValueChanged方法，@bind会自动生成一套绑定逻辑（包含input的onchange事件绑定），导致你自定义的OnValueChanged从未被调用，父组件的:after回调自然无法触发。

以下是两种推荐的实现方式：

方式一：手动处理子组件输入绑定（灵活可控） #

修改子组件，移除@bind语法，手动绑定input的@onchange到自定义方法，确保ValueChanged事件正确触发：

修正后的子组件代码

<h3>Child Component</h3>

<input type="number" value="@Value" @onchange="OnValueChanged" />

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

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

    private async Task OnValueChanged(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value?.ToString(), out var newValue))
        {
            Value = newValue;
            await ValueChanged.InvokeAsync(Value);
        }
    }
}

父组件代码无需修改，此时@bind-Value:after="HandleValueChanged"会在parentValue更新后触发回调方法。

方式二：直接绑定父组件的ValueChanged事件 #

若不想使用:after语法，可直接在父组件中绑定子组件的ValueChanged事件，手动维护双向绑定逻辑：

修改后的父组件代码

@page "/parent"

<h3>Parent Component</h3>

<ChildComponent Value="parentValue" ValueChanged="HandleValueChanged" />

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

@code {
    private int parentValue = 0;

    private async Task HandleValueChanged(int newValue)
    {
        parentValue = newValue;
        Console.WriteLine($"Value changed to: {parentValue}");
        // 添加其他业务逻辑
    }
}

子组件使用方式一中的修正代码即可，这种方式更直观，适合需要直接获取新值的场景。

额外注意事项 #

• 保证子组件ValueChanged事件的参数类型与Value属性一致（此处均为int），否则绑定会失效。
• 使用int.TryParse替代直接int.Parse，避免输入非数字内容时抛出异常，提升组件健壮性。

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