当前位置：首页 > news >正文

Blazor-父子组件传递任意参数

news 2025/2/23 20:05:34

在我们从父组件传参数给子组件时，可以通过子组件定义的[Parameter]特性的公开属性进行传值，但是当我们需要传递多个值的时候，就需要通过[Parameter]特性定义多个属性，有没有更简便的方式？
我们可以使用定义 IDictionary<string,object>类型的参数，并使用[Parameter(CaptureUnmatchedValues =true)]特性进行标注，这样在父组件中嵌套子组件时，可以任意的传递参数。
子组件：

<h3>ParameterChild</h3>
<ul>@if (Parameters != null){@foreach (var item in Parameters){<li>key=@item.Key，value=@item.Value</li>}}
</ul>
@code {[Parameter(CaptureUnmatchedValues = true)]public Dictionary<string, object>? Parameters { get; set; }
}

我们在子组件中将所有参数展示出来，用于验证参数是否传递成功
父组件：

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<ParameterChild class="123" x1 ="2"></ParameterChild>@code {}

运行结果：
在这里插入图片描述

我们通过运行结果可以看到，参数被正确的传递到了子组件

参数设置顺序

@attributes 特性在应用字典中的任意参数时，是从右向左进行设置的。
下面我们还是用一段代码示例看看是怎么处理的
子组件：

<h3>ParameterChild</h3>
<div @attributes=Parameters x1="200"></div>
<ul>@if (Parameters != null){@foreach (var item in Parameters){<li>key=@item.Key，value=@item.Value</li>}}
</ul>
@code {[Parameter(CaptureUnmatchedValues = true)]public Dictionary<string, object>? Parameters { get; set; }
}

父组件：

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<ParameterChild class="123" x1 ="2"></ParameterChild>@code {}

我们在子组件和父组件中都为div赋值了x1属性，<div @attributes=Parameters x1=“200”>，根据参数设置的顺序，x1="200"在右侧，优先进行了设置，我们来看看运行的结果是否和我们预期的一致
运行结果：
在这里插入图片描述

运行的结果和我们的预期是完全一致的，如果调整<div @attributes=Parameters x1=“200”>中x1和 @attributes的顺序，结果应该是赋值x1=2
我们调换顺序做一次尝试
修改后的子组件如下：

<h3>ParameterChild</h3>
<div x1="200" @attributes=Parameters></div>
<ul>@if (Parameters != null){@foreach (var item in Parameters){<li>key=@item.Key，value=@item.Value</li>}}
</ul>
@code {[Parameter(CaptureUnmatchedValues = true)]public Dictionary<string, object>? Parameters { get; set; }
}