Blazor子组件双向绑定：如何以子组件默认值作为初始值？

当前遇到的问题是：父组件的Name属性未初始化（默认值为null），使用@bind-Name与子组件双向绑定时，父组件的null值会覆盖子组件预设的默认值"Scooby Do"。要实现启用双向绑定的同时，让子组件的默认值作为初始值同步给父组件，可以采用以下两种方案：

方案一：子组件初始化时主动同步默认值（推荐，解耦） #

修改子组件代码，在生命周期方法中检查传入的Name是否为空，若为空则触发回调将默认值传递给父组件：

<p>Name: @Name</p>

@code {
    [Parameter]
    public string Name { get; set; } = "Scooby Do";
    [Parameter]
    public EventCallback<string> NameChanged { get; set; }

    protected override void OnInitialized()
    {
        // 父组件未传入有效值时，将子组件默认值同步给父组件
        if (string.IsNullOrEmpty(Name))
        {
            NameChanged.InvokeAsync("Scooby Do");
        }
    }
}

原理说明 #

当子组件初始化时，若父组件的Name为null或空字符串，就通过NameChanged回调通知父组件更新绑定值。由于父组件使用了@bind-Name，Blazor会自动处理回调逻辑，将父组件的Name设置为子组件的默认值，后续双向绑定的交互（比如父组件输入框修改值）也能正常同步到子组件。

方案二：父组件直接初始化默认值（简单但耦合） #

如果可以接受父组件依赖子组件的默认值，直接在父组件中初始化Name属性：

Name: <InputText @bind-Value=@Name/>
<ChildComponent @bind-Name=@Name />

@code {
    // 直接使用子组件的默认值初始化
    public string Name { get; set; } = "Scooby Do";
}

注意事项 #

这种方法虽然简单，但子组件默认值修改后，父组件也需要同步更新，耦合性较高，适合简单场景。

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