Blazor WASM中两个子组件双向绑定通信问题求助

问题根源 #

当你在子组件的FirstChildInput属性setter中调用FirstChildInputChanged.InvokeAsync(value)时，会触发无限循环更新：

1. 输入框内容变更，触发绑定更新FirstChildInput，执行setter；
2. setter调用FirstChildInputChanged，父组件的_valueToPass更新；
3. 父组件将新的_valueToPass传递给两个子组件，包括当前的FirstChildComponent，再次触发FirstChildInput的setter；
4. 重复上述步骤，导致页面因无限渲染循环冻结。

而通过独立方法触发InvokeAsync时，只有用户主动操作才会触发回调，不会因父组件回传值再次执行，因此无循环问题。

另外，Action无法替代EventCallback的原因是：Action是同步委托，无法关联Blazor的组件渲染上下文，无法触发父组件的状态更新和UI重渲染，所以值变更无法传递给父组件。

正确解决方案 #

方案1：手动绑定输入事件（推荐） #

放弃@bind-value的自动绑定，改用手动处理输入事件，仅在用户输入时触发回调，避免循环：

第一个子组件修改后代码

<div style="display: flex; flex-direction: column; align-items: center; height: 200px; width: 400px; border: solid 1px black; padding:16px">
    <h3>FirstChildComponent</h3>
    <br />

    <div style="display: flex; flex-direction: column">
        <input style="height: 32px;" value="@FirstChildInput" @oninput="HandleInputChange" />
        <br/>
        <span>
            <label>Résultat : @FirstChildInput</label>
        </span>
    </div>
</div>

@code {
    [Parameter]
    public string FirstChildInput { get; set; }

    [Parameter] public EventCallback<string> FirstChildInputChanged { get; set; }

    private async Task HandleInputChange(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString();
        if (FirstChildInput != newValue)
        {
            await FirstChildInputChanged.InvokeAsync(newValue);
        }
    }
}

第二个子组件修改后代码

<div style="display: flex; flex-direction: column; align-items: center; height: 200px; width: 400px; border: solid 1px black; padding:16px">
    <h3>SecondChildComponent</h3>
    <br />

    <div style="display: flex; flex-direction: column">
        <input style="height: 32px;" value="@SecondChildInput" @oninput="HandleInputChange" />
        <br/>
        <span>
            <label>Résultat : @SecondChildInput</label>
        </span>
    </div>
</div>

@code {
    [Parameter]
    public string SecondChildInput { get; set; }

    [Parameter] public EventCallback<string> SecondChildInputChanged { get; set; }

    private async Task HandleInputChange(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString();
        if (SecondChildInput != newValue)
        {
            await SecondChildInputChanged.InvokeAsync(newValue);
        }
    }
}

为什么该方案有效 #

只有用户输入触发oninput事件时，才会调用FirstChildInputChanged更新父组件状态；父组件回传值更新子组件参数时，不会触发输入事件，因此不会形成循环。

关键注意事项 #

• Blazor的@bind是语法糖，本质是绑定参数+对应的Changed事件回调，不要在参数setter中触发回调，否则极易引发循环更新；
• EventCallback是Blazor组件通信的首选，它会捕获组件的渲染上下文，确保状态变更后UI正确重渲染，这是Action无法做到的。

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