如何在Blazor组件中实现父组件向子组件传递数据？

方法一：组件参数双向绑定（最常用） #

这是Blazor中最直接的传递方式，通过子组件定义可绑定参数，实现父组件输入框与子组件的数据同步。

1. 子组件代码：

<!-- ChildComponent.razor -->
<p>子组件接收值：@InputValue</p>

@code {
    // 标记为组件参数
    [Parameter]
    public string InputValue { get; set; }

    // 双向绑定必须的回调事件
    [Parameter]
    public EventCallback<string> InputValueChanged { get; set; }
}

2. 父组件代码：

<!-- ParentComponent.razor -->
<input type="text" @bind="ParentInput" />
<ChildComponent @bind-InputValue="ParentInput" />

@code {
    private string ParentInput { get; set; }
}

方法二：修正RenderFragment传递方式 #

你之前的方法无效，大概率是没正确定义带参数的RenderFragment，调整后可以实现：

1. 父组件代码：

<!-- ParentComponent.razor -->
<input type="text" @bind="ParentInput" />
<ChildComponent>
    @context(ParentInput)
</ChildComponent>

@code {
    private string ParentInput { get; set; }
}

2. 子组件代码：

<!-- ChildComponent.razor -->
@RenderContent(CurrentInput)

@code {
    private string CurrentInput { get; set; }

    // 定义接收字符串参数的RenderFragment
    [Parameter]
    public RenderFragment<string> RenderContent { get; set; }
}

注意事项 #

• 子组件的参数必须添加[Parameter]特性，Blazor才能识别为组件参数
• 双向绑定必须配套EventCallback<类型> 参数名Changed，否则@bind-参数名语法无法生效
• RenderFragment传递参数时，要明确定义带参数的类型，而非无参数的默认RenderFragment

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