C# Blazor 学习笔记(2):组件模板化/插槽

文章目录

• 前言
• 组件模板
• • 为什么要组件模板
  • • 不使用组件模板
    • 使用后
  • 代码部分
• 和直接绑定数据有和区别？

前言

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

}

和直接绑定数据有和区别？

对于组件更高的控制权，绑定数据源，如何展示是受模板组件限制的。使用了模板可以自定义展示效果。