1.前言

本文接自Blazor的组件（1）-从0构建一个组件

2.分部类组件

Razor组件你可理解为就是一个类名与文件名相同的类，因此，可以新建一个同名的partial类，将组件中@code里面的代码放置到这个partial类里面，然后将原来组件中的@code部分删除。

将VButton组件改写为分部类的代码组织方式，其代码如下（新建一个组件为VButtonPartial，并将原来的代码VButton组件中的代码分别复制过去）：

VButtonPartial.razor

1	`<button type="button" class="@GetClassName()">@ChildContent</button>`

VButtonPartial.razor.cs

`using Microsoft.AspNetCore.Components; namespace BlazorComponent.MyComponents { public partial class VButtonPartial { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default; [Parameter] public VBtnSize BtnSize { get; set; } = VBtnSize.Default; private string GetClassName() { var builder = new System.Text.StringBuilder(); builder.Append("btn"); if (BtnStyle != VBtnStyle.Default) { builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); } if (BtnSize != VBtnSize.Default) { builder.Append($" btn-{BtnSize.ToString().ToLower()}"); } return builder.ToString(); } } } `

3.组件的继承

Razor组件都继承于Microsoft.AspNetCore.Components.ComponentBase类（可以项目的obj/Debug/netstandard2.1/Razor看到），因此，我们可以新建一个继承自ComponentBase类的父类，将组件中的公共部分提取到父类中，然后使组件继承这个父类。例如之前的VButton组件，我们可以构建一个新的VComponentBase，该类继承至ComponentBase类，然后将ChildContent属性提升到这个类中：

VComponentBase.cs

1	`public class VComponentBase:ComponentBase { [Parameter] public RenderFragment ChildContent { get; set; } } `

然后新建一个组件VButtonInherit，将VButton组件中除ChildContent组件参数外的所有代码都复制到VButtonInherit组件中，并在组件最上方使用**@inherits指令**，指示VButtonInherit继承于VComponentBase类。

VButtonInherit.razor

`@inherits VComponentBase <button type="button" class="@GetClassName()">@ChildContent</button> @code { [Parameter] public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default; [Parameter] public VBtnSize BtnSize { get; set; } = VBtnSize.Default; string GetClassName() { var builder = new System.Text.StringBuilder(); builder.Append("btn"); if (BtnStyle != VBtnStyle.Default) { builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); } if (BtnSize != VBtnSize.Default) { builder.Append($" btn-{BtnSize.ToString().ToLower()}"); } return builder.ToString(); } } `

当然，也可以将分部类组件与组件的继承结合使用。

本文参考：创建和使用 ASP.NET Core Razor 组件

封面图来自：https://www.hanselman.com/blog/WhatIsBlazorAndWhatIsRazorComponents.aspx