Blazor 中向组件传递参数主要通过 组件参数(Component Parameters) 实现,本质是给组件的 public 属性打
[Parameter]特性。这是最常用、最直接的方式。
使用 [Parameter] 传递简单类型参数
在子组件中定义带
[Parameter]特性的 public 属性,父组件在引用时用属性语法传值: 子组件(如
Counter.razor)中写:
@code {<br> [Parameter] public int StartCount { get; set; } = 0;<br> [Parameter] public string Title { get; set; } = "计数器";<br>}
父组件中使用:<counter startcount="5" title="我的计数器"></counter>注意:参数名区分大小写,且必须是 public、可 set 的属性;不加
[Parameter]不会被识别为输入参数。
传递组件内容(Child Content)
用
[Parameter] public RenderFragment ChildContent { get; set; } 接收嵌套内容:
子组件(如 Card.razor)中定义:
[Parameter] public RenderFragment ChildContent { get; set; }
模板中渲染:<div class="card"><br> @ChildContent<br></div>父组件调用:
<Card><br> <h3>标题</h3><br> <p>这里是卡片正文</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2526" title="ithy"><img
src="https://www.herecours.com/d/file/efpub/2026/21-21/20260221140251179505.jpg" alt="ithy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2526" title="ithy">ithy</a>
<p>融合多种AI模型的AI搜索平台</p>
</div>
<a href="/ai/2526" title="ithy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><br></Card>
传递事件回调(EventCallback)
让子组件“通知”父组件,用
EventCallback<t></t>: 子组件中声明:
[Parameter] public EventCallback<string> OnClick { get; set; }</string>
触发时调用:await OnClick.InvokeAsync("按钮被点了");
父组件绑定:<mybutton onclick="HandleClick"></mybutton>
并在
@code块中定义:
private void HandleClick(string msg) { ... }
可选参数与默认值
参数可以设默认值(C# 属性默认值或构造函数初始化),不传也不会报错:
[Parameter] public bool IsEnabled { get; set; } = true;
也可用 [Parameter] public string? Description { get; set; } 表示可为空,不传即为 null。 若需判断是否显式传入,可用
bool HasValue配合 nullable 引用类型 + 初始化检查,但 Blazor 本身不提供“是否传了”的元信息,一般靠默认值语义区分。
基本上就这些。参数传递不复杂但容易忽略大小写和 public/set 要求,写完记得检查编译错误提示 —— 它通常会明确告诉你哪个属性没加
[Parameter]或不可访问。
