.NET 8 InteractiveServer渲染模式下组件双向绑定实现咨询

在InteractiveServer渲染模式下，父子组件双向绑定完全可行，只要遵循Blazor的绑定规范就能解决父组件值不更新的问题，具体实现如下：

子组件（SwitchComponent.razor）写法 #

子组件必须包含两个核心部分：绑定属性和对应的Changed回调事件，代码示例：

<button @onclick="ToggleSwitch">切换状态</button>

@code {
    // 标记为可绑定参数
    [Parameter]
    public bool Value1 { get; set; }

    // 必须和属性名严格匹配：属性名 + Changed
    [Parameter]
    public EventCallback<bool> Value1Changed { get; set; }

    private async Task ToggleSwitch()
    {
        var newVal = !Value1;
        // 调用回调通知父组件更新值，必须用await确保UI刷新
        await Value1Changed.InvokeAsync(newVal);
    }
}

⚠️ 重点注意：

• 别直接在子组件里修改Value1的值（比如Value1 = !Value1），子组件的参数应该由父组件来维护，正确流程是通过Value1Changed把新值传给父组件，父组件更新后再同步回子组件。
• EventCallback必须异步调用（加await），否则InteractiveServer模式下UI可能无法及时刷新。

父组件（MainLayout.razor）调用 #

父组件直接用@bind-Value1语法绑定到自身属性即可，不用手动处理事件：

<div>当前状态：@ThisValue</div>
<SwitchComponent @rendermode="@RenderMode.InteractiveServer" @bind-Value1="@ThisValue" />

@code {
    private bool ThisValue { get; set; } = false;
}

排查问题的常见方向 #

如果父组件的值还是不更新，先检查这几点：

• 子组件的Changed事件名称是否正确，必须是属性名+Changed（比如属性是Value1，事件就必须是Value1Changed，不能加前缀或改名字）
• 有没有在子组件里直接修改了Value1的属性值，而没调用Value1Changed
• 调用Value1Changed.InvokeAsync的时候有没有加await
• 父组件的ThisValue是不是正确定义了get; set;（不能是只读或者常量）

内容的提问来源于stack exchange，提问作者Didzis Stivriņš