5.组件的参数
-
- 参数必须是一个C#属性，前面用[parameter]标签
-
- 当自己写的组件需要支持调用者在开始和闭合标签之间写文本时，则必须写一个名称叫 ChildContent 的约定参数，类型为RenderFragement? 。
-
- 如果像上一步一样组件已经有了事先约定名称为 ChildContent 的参数，我们又要写多个类型也为RenderFragement的参数比如叫 TitleContent 时，则使用者在调用参数时，直接在开始和闭合标签之间写html文本只会赋值给名子为约定名的ChildContent参数，如果要赋给TitleContent参数，则必须显式把它包裹在以TitleContent为标签名称的html标签内才可以。
6.导航参数
6.1 模版匹配
页面路由为 ：@page "/nav/{Id:int?} 时，URL中参数Id的值采用声明一个同名参数（注意大小写敏感）的方式来获取：
[parameter]public int? Id{get;set;}
6.2 查询参数匹配
查询URL如：/list/2?page=3&name=小四，此时可以在参数的[Parameter]标签后再跟一个标签[SupplyParameterFromQuery]，比如：
[Parameter][SupplyParameterFromQuery]public string Name{...}
[Parameter][SupplyParameterFromQuery]public int Page{...}
这时，客户端调用时从URL中传入的参数，就会被后端与URL中参数同名（大小写不敏感）的Name、Page参数获取到。
7.级联参数
7.1 为什么要用级联参数？
因为普通参数不够用：在组件内部定义的普通参数，可以方便的让调用者传递信息进入组件内部；但是
-
- 当参数较多时，一 一定义就会很麻烦
-
- 当层级很深时每个层的组件也都要定义一次所有才能层层向深处传递参数，还是很麻烦。
所以，我们需要设计一种参数，1.可以以引用类型为载体，比如类 好处是可以一次传递多个参数 2.最外层组件定义一次而在内层组件中可层层传递使用。
7.2 组件中级联参数的定义 用CascadingValue标签
在组件中
<CascadingValue value="@("张佳乐")" Name="Name">
...
</CascadingValue>
其中，属性value指定了值，属性Name指定了该级联参数的名称（当级联参数有多个时用以彼此区分）。级联参数可以层层嵌套Nest。
7.3 级联参数在子组件中的接收
- 使用在子组件中定义的带CascadingParameter特性标签的属性来接收父组件中用CascadingValue定义的级联参数
[CascadingParameter(Name="Name")]string? StudentName{get;set;}
- 注意：
1.当一个数据类型的级联参数只有一个时，不需要指定Name参数,即使有多个级联参数也能被按类型一一接收到而不会错位匹配。
2.定义中的类型与接收中的类型必须一至才能接收到,即使指定名称也必须类型一致。
8.事件和事件参数
html元素的事件名称前加 @ 符号，即成为Blazor的事件（blazor与js交互时会映射为去掉 @ 符号后的 html事件从而引发js代码）举例如@onclick、@onkeypress事件，事件要执行的是一段C#代码或方法，实际上该事件就是一个C#的EventCallback<T>类型的委托，这也就衔接到了C#委托的知识体系上来了。其中 T 是Blazor为我们封装好的事件参数类型（方便使用它很多的属性），比如MouseEventArgs、KeyEventArgs 他们也一样继承自C#中EventArgs类。
8.1 定义事件
假定我们写了一个组件名为 Collapse ，在其内部定义一个事件：
[parameter]public EventCallback OnExpanded {get;set;}
命名一般以On开头。这样外部调用都就可以传递合适的方法给这个委托，组件内部适当的地方我们就可以执行这个委托从而执行外部传进来的C#方法,如：
{await OnExpanded?.InvokeAsync();}
8.2 外部调用者使用事件
@Page "/"
<PageTitle> Home </PageTitle>
<Collapse OnExpanded="Expand">显示的内容</Collapse>
<h3>@message</h3>
...
@code
{
string? message;
void Expand()
{
message = "内容被展开";
}
}
