前言

组件模板化我们在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();}}