分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:23:05

由于后面这几个知识点，都比较容易理解，因此我们将这三章合成一章，本章分别讲述三个主题：

1. 模板组件

2. CSS独立

3. 组件库

模板组件

模板组件指的是接受一个或者多个以UI 模板为参数的组件，接受到的参数会在组件渲染的时候进行渲染，每个参数的类型必须是RenderFragment或者RenderFragment<Tvalue>形式的参数，同时在应用组件的时候可以以子标签的形式赋予参数值，具体的可以看下图的实例代码：
TableTemplate.razor:

如上述代码所示:

需要注意，如果您的模板组件是支持泛型的，那么必须在组件起始处加以说明：

@typeparam Item

其中模板参数 TableHeader和RowTemplte 均是该模板组件的参数。我们使用如下的代码进行调用：

请仔细参考模板组件的使用方法。

以上就是模板组件的简单说明和使用方法。

CSS独立

我们在开发组件的时候，有时候想给组件定义不一样的外观，那么就需要使用到CSS，我们可以给每一个组件都创建一个单独定义外观的CSS文件，只需要创建一个和组件同名的，在同一个目录下，加上扩展名css，结果的CSS文件就可以了。例如：

我们在Pages目录下有一个组件：Counter.razor,  如果需要给这个组件赋予一个独立的CSS文件，那么就是Counter.razor.css, 然后我们可以在该文件里定义我们需要的外观。

Blazor在编译的时候会将所有组件自定义的CSS文件全部抽离出来并并入一个单独的CSS文件，然后由项目中的wwwroot/index.html引用，或者Pages/_host.cshtml引用。这个独立的文件由编译过程处理，该文件名的命名遵行如下格式：

{项目名}.style.css ，并放置在项目web root根目录下，如下图：

另外需要注意的是，在独立组件的CSS文件里无需多考虑什么，直接按照平时处理CSS文件的形式来处理，Blazor会在编译的时候自动给您在组件定义的CSS选择器这里自动生成一个范围标识，如下图：

默认情况下使用格式b-{字符}的形式定义范围标识符，但是我们可以根据需要更改这个标识符：

在项目文件里添加上上述配置，各组件共享一个范围标识符，有利于CSS共享。

同时需要注意默认情况下父组件定义的CSS不会应用到子组件，每个组件都是独立的，但是如果想要应用父组件的CSS到子组件，那么在编写组件的CSS代码时，加入::deep, 如下图：

这样就可以将父组件的CSS应用到子组件中了。

Blazor中的组件库的支持

使用如下的命令创建组件库：

然后在项目中添加引用：

引入项目中后有两种方式可以调用组件库。

在_Imports.razor中使用@using 引入。

在单个组件中使用@using 引入

如果RCL中使用了独立的CSS，无需过于关心，Blazor会依据前面的流程处理好。