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

本章我们学习Blazor组件的基础之级联值(Cascade Value)和级联参数(Cascade Parameter)。

级联值(CascadeValue)在Blazor中是指这样的一个应用场景，我们在使用Blazor组件的时候都是通过HTML标记的形式在使用，例如<Component1 ><Component2/></Compontent1> 这样的形式，根据HTML的特性我们也了解整个HTML文档实际上也是类似一个标记树，那么我们有一些应用场景，我们需要在父组件或者是根组件里一些值，并且希望这个值能被父组件或者跟组件以下的所有子组件都可以访问到，针对这种应用场景，Blazor提供就是级联值(CascadeValue),  级联值(CascadeValue)在使用的过程中实际上是需要顶一个级联值组件，然后需要在子组件中需要要定义级联参数来引用该值(CascadeParameter)。上述是我们概念。

这里要再强调一遍，所谓的级联值实际上就是级联值组件，这个组件可以认为是内置的。

这里举一个实例，我们定义一个类，使用该类定义模板，为了简便，我们在这个模板类里定义一个按钮的CSS类型，该模板类的定义如下：

然后我们希望项目中所有的子组件都能够使用该模板类定义的按钮的样式。为了达到这个目的，我们需要定义一个级联值，如下图：

该代码片段中，我们是直接使用项目的主要布局组件: MainLayout.razor, 然后在布局组件中使用属性@body来引用所有的子组件，关于布局组件的学习，我们在后面的文章中在学习，目前我们知道布局组件的概念，同时理解属性Body用于引用所有的其他子组件就可以了。从这个代码定义中我们可以看到我们使用了一个级联值组件，并且指定该组件的值为theme, 该字段定义为ThemeInfo类的类型。

定义了级联值之后，我们如果需要在子组件中引用该值的话，需要在该组件中定义级联参数用于引用该值。

如下图所示：

在子组件中通过特性[CascadingParameter]来定义一个级联参数，并定义需要的类，从而引用该级联值。

定义同一类型的多个级联值

如果需要定义多个同一类型的多个级联值，那么我们需要使用名称来区分，因为他们是同一个类型，单一类型可以通过类型来推导，但是同一类型的多个值，无法使用类型推导，最佳编程实践：最好无论是单一类型单一值，还是单一类型多个值，最好都是用名称，下面我们看一下单一类型多个值如何定义：

如上图所示：使用Name来定义级联值的名称

在子组件中也通过名称来引用：

跨组件级别传送数据

我们前面讨论过组件的调用是使用HTML标记进行调用的，我们可以将这种调用想象成一棵树，因此从根组件到子组件到叶组件，形成类似树状，而且Blazor在渲染的时候也是在内存中以Graph tree来表示的，因此这里的组件级别类似于父组件，子组件，叶组件这样的结构，如果我们需要跨组件级别传送数据，除了可以使用组件参数之外，我们也可以使用级联值和级联参数来完成这个任务。

我们这里举一个实例，我们有一个TabSet,  TabSet包括一个集合，每个元素都是一个Tab,在这里，由于我们需要在TabSet里对包含的tab 进行操作，例如我们需要在Tabset调用tab, 使得tab变为活动的，我们前面学习的技术都是从父组件中传送参数到子组件，可以使用@ref 进行引用，但是无法知道tab的固定个数，所以也很难处理，这种场景我们可以考虑使用级联值来完成这个需求，将TabSet 实例本身作为一个级联值，传入到tab里，如下是TabSet组件的定义。

如下是Tab 组件的定义

然后我们再看一下整个测试是如何运作的：

以上就是级联值和级联参数的全部内容了。