前言
组件模板化我们在WPF经常遇到，这里将一下Blazor是如何解决的。
组件模板
为什么要组件模板
虽然组件化了之后，我们写代码的速度已经很快了。但是组件模板会让我们写的更快。
这里有个需要。需要一个学生页面和老师页面。
不使用组件模板
学生
<组件1/>
<组件2/>
<组件3/>
<组件4/>
....
<学生信息/>
老师
<组件1/>
<组件2/>
<组件3/>
<组件4/>
....
<老师信息/>
使用后
声明组件
<组件1/>
<组件2/>
<组件3/>
<组件4/>
....
<组件模板a/>
使用组件
<组件模板>
<组件模板a>
<学生信息/>
</组件模板a>
</组件模板>
<组件模板>
<组件模板a>
<老师信息/>
</组件模板a>
</组件模板>
代码部分
Tips:我这里使用了元祖来作为临时变量。这个是C#的语法
<h3>Model</h3>
<table>
<thead>
@HeadTemplate
</thead>
<tbody>
@foreach(var item in Items)
{
<tr>@RowTemplate(item)</tr>
}
</tbody>
</table>
@code {
//内容模板
[Parameter]
public RenderFragment HeadTemplate {
get; set; }
//数据模板,使用元祖来作为数据源
[Parameter]
public RenderFragment<(string Name,string Age)> RowTemplate {
get; set; }
//数据源
[Parameter]
public IReadOnlyList<(string Name,string Age)> Items {
get; set; }
}
使用
<Model Items="Lists">
<HeadTemplate>
<th>Name</th>
<th>Age</th>
</HeadTemplate>
<RowTemplate>
<!--@context是拿到数据模板的上下文，由于我们使用的是元祖，所以可以直接使用-->
<td>@context.Name</td>
<td>@context.Age</td>
</RowTemplate>
</Model>
@code{
public List<(string Name,string Age)> Lists{
get; set; }
protected override Task OnInitializedAsync()
{
Lists = new List<(string Name, string Age)>
{
("小王","11"),
("小刘","12"),
("小陈","13")
};
return base.OnInitializedAsync();
}
}
和直接绑定数据有和区别？
对于组件更高的控制权，绑定数据源，如何展示是受模板组件限制的。使用了模板可以自定义展示效果。