Blazor如何从父页面给自定义子组件设置传递参数

下面是3种常用的实现方式，你可以根据自己的场景选择：

方法1：父组件变量绑定（最为推荐，通用性最强） #

直接将参数值定义在父页面的后台代码中，通过绑定的方式传给子组件，长文本、动态值都适用：

1. 父页面@code块中定义对应变量，长文本可直接多行书写，也支持从接口、配置、数据库等外部来源读取：

@code {
    // 短参数直接赋值
    private string PageHeader = "系统首页";
    // 长文本可以用@""多行字符串直接写，无需转义换行
    private string PageDesc = @"这是一段非常长的描述内容，
支持任意换行书写，
不管内容多长都可以维护在后台代码中，不会污染组件标签的结构，
后续修改也不用动视图层代码。";
}

2. 引用子组件时直接绑定变量即可：

<MainHeader HeaderText="@PageHeader" Description="@PageDesc" />

优势：变量修改后子组件会自动更新，响应式逻辑无需手动处理

方法2：直接在参数中使用C#原始字符串（适合一次性写死的长文本） #

如果不想额外定义变量，也可以直接在组件标签中用C#原始字符串语法写长内容：

<MainHeader 
    HeaderText="系统首页"
    Description="@"""
这是一段很长的描述内容
可以直接换行书写
甚至支持直接插入"双引号"不需要转义
适合临时用的固定内容场景
"""
/>

注：该语法需要C# 10及以上版本支持

方法3：通过组件引用@ref赋值（适合需要动态触发赋值的场景） #

如果需要在父页面的业务逻辑执行完成后才给子组件赋值，可以用组件引用的方式操作：

1. 给子组件添加@ref标记，同时在父后台定义对应类型的变量：

<MainHeader @ref="_mainHeader" />

@code {
    private MainHeader? _mainHeader;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && _mainHeader is not null)
        {
            // 在这里可以任意给子组件参数赋值
            _mainHeader.HeaderText = "系统首页";
            _mainHeader.Description = "任意长度的描述内容，支持动态赋值";
            // 手动触发子组件更新
            _mainHeader.StateHasChanged();
        }
    }
}

注意：该方式需要手动处理组件更新逻辑，非特殊场景优先使用第一种绑定方式

扩展方案（适合Description为富文本/复杂内容的场景） #

如果你的Description后续需要支持HTML标签、嵌套组件等复杂内容，可以把子组件的Description参数类型改成RenderFragment：

[Parameter]
public RenderFragment? Description {get; set;}

父页面引用时就可以直接在标签内部写内容，完全不受长度限制：

<MainHeader HeaderText="系统首页">
    <Description>
        这里可以写任意长度的内容
        还可以插入任意HTML标签：<strong>加粗文字</strong>、<span style="color: #2563eb">蓝色文字</span>
        甚至可以嵌套其他Blazor组件，灵活度非常高
    </Description>
</MainHeader>

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