blazor 父组件传入多个同名子组件
时间: 2024-09-28 16:01:01 浏览: 22
Blazor 中,如果你想要在一个父组件传递多个同名子组件,可以利用 C# 的动态属性(Dynamic Properties)以及依赖注入来实现。父组件可以创建一个动态属性集合(Dictionary),其中键是子组件的标识符,值是子组件实例。
例如:
```razor
@page "/parent"
<template>
<div>
<ChildComponent1 @ref="child1" Key="1" />
<ChildComponent1 @ref="child2" Key="2" />
<!-- 使用一个动态对象来存储多个子组件 -->
<ChildComponent @bind-ChildrenAsObject="{ bind-Value=children }">
<ChildComponent1 Key="3" />
<ChildComponent1 Key="4" />
</ChildComponent>
</div>
</template>
@code {
private Dictionary<string, ChildComponent> children = new Dictionary<string, ChildComponent>();
[Parameter]
public dynamic ChildrenAsObject { get; set; }
// 对于每个子组件引用,添加到字典中
protected override void OnParametersSet()
{
if (ChildrenAsObject is not null)
{
foreach (var item in ChildrenAsObject)
{
if (item is not null && item.Key is not null)
{
children.Add(item.Key.ToString(), (ChildComponent)item);
}
}
}
}
// 子组件引用
private ChildComponent child1;
private ChildComponent child2;
// 其他子组件引用...
}
```
在这个例子中,`ChildComponent` 需要接收 `ChildrenAsObject` 参数,并处理如何解析这个动态对象中的子组件。通过这种方式,你可以轻松地向多个同名子组件传入不同的数据或配置。
阅读全文