ASP.NET Core 8中自定义Razor组件多参数传递解决方案

一、正确定义组件的多参数 #

自定义Razor组件中，每个需要接收外部传递的参数都必须添加[Parameter]特性，示例如下：

@* 自定义组件：MyCustomComponent.razor *@
<div>
  <p>标题：@Title</p>
  <p>数量：@Count</p>
</div>

@code {
    // 第一个参数：字符串类型
    [Parameter]
    public string Title { get; set; } = string.Empty;

    // 第二个参数：整数类型
    [Parameter]
    public int Count { get; set; }
}

二、父组件传递多个参数 #

调用组件时，直接通过HTML属性的形式传递多个参数即可，参数名需与子组件定义的完全一致：

@* 父组件页面/组件 *@
<MyCustomComponent Title="商品列表" Count="20" />

三、传递对象类型参数（可选） #

如果需要传递复杂对象，同样给对象类型参数添加[Parameter]特性：

@* 自定义组件 *@
<div>
  <p>用户名：@User.Name</p>
  <p>年龄：@User.Age</p>
</div>

@code {
    // 定义对象模型
    public class UserDto
    {
        public string Name { get; set; } = string.Empty;
        public int Age { get; set; }
    }

    // 对象类型参数
    [Parameter]
    public UserDto User { get; set; } = new();
}

@* 父组件调用 *@
<MyCustomComponent User="@new UserDto { Name = "Diego", Age = 32 }" />

常见错误排查 #

• 遗漏[Parameter]特性：这是最容易犯的错误，没有该特性的属性无法接收外部传递的值。
• 参数名大小写不匹配：Razor组件参数大小写敏感，传递时需与子组件定义的名称完全一致。
• 未初始化默认值：引用类型参数建议初始化默认值（如= string.Empty、= new()），避免空引用异常。

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