ASP.NET Core Blazor简介和快速入门二（组件基础之组件参数）
【摘要】 大家好，我是码农刚子。上一章介绍了Blazor组件的事件处理。接下来我们继续了解Blazor 组件参数相关的基础知识，希望对你有所帮助。1、组件参数和级联参数1. 组件参数(Parameter)参数主要用来在各组件之间传递值，在初始项目的SurveyPrompt组件中就包含了一个参数:[Parameter]public string Title { get; set; }通过用Paramet...
大家好，我是码农刚子。上一章介绍了Blazor组件的事件处理。接下来我们继续了解Blazor 组件参数相关的基础知识，希望对你有所帮助。
1、组件参数和级联参数
1. 组件参数(Parameter)
参数主要用来在各组件之间传递值，在初始项目的SurveyPrompt组件中就包含了一个参数:
[Parameter]
public string Title { get; set; }
通过用Parameter修饰符来修饰，就可以将指定的属性（注意要是public的）声明为参数，使用也很简单：
<SurveyPrompt Title="这里是参数的值" />
2. CaptureUnmatchedValues
CaptureUnmatchedValues 是 Blazor 中一个非常有用的特性，它允许组件捕获所有未匹配到组件参数的额外属性。
基本概念
当你在组件上设置了属性，但这些属性没有对应的 [Parameter] 时，CaptureUnmatchedValues 可以捕获这些"未匹配"的属性，而且修饰的属性必须要是字典类型：IDictionary。
基本用法
<!-- MyComponent.razor -->
<div @attributes="AdditionalAttributes">
组件内容
</div>
@code {
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } =
new Dictionary<string, object>();
}
使用场景示例
1. 创建可复用的按钮组件
<!-- MyButton.razor -->
<button @attributes="AdditionalAttributes" class="btn @Class">
@ChildContent
</button>
@code {
[Parameter]
public string Class { get; set; } = string.Empty;
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } =
new Dictionary<string, object>();
}
使用方式
<MyButton class="btn-primary"
id="submit-btn"
onclick="console.log('clicked me')"
data-custom="value">
点击我
</MyButton>
2.包装第三方组件
<!-- WrapperComponent.razor -->
<ThirdPartyComponent @attributes="AdditionalAttributes"
SpecificParameter="@SpecificValue" />
@code {
[Parameter]
public string SpecificValue { get; set; } = string.Empty;
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } =
new Dictionary<string, object>();
}
实际应用案例
创建灵活的容器组件
<!-- FlexContainer.razor -->
<div @attributes="AdditionalAttributes" class="flex-container @Class">
@ChildContent
</div>
@code {
[Parameter]
public string Class { get; set; } = string.Empty;
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } =
new Dictionary<string, object>();
}
使用示例:
<FlexContainer class="my-styles"
id="main-container"
style="background-color: lightblue;"
data-tracking="user-section"
aria-label="主要区域">
<p>这里是可以自定义样式的容器内容</p>
</FlexContainer>
3. 级联参数(CascadingParameter)
级联参数看起来就比Parameter更高级，主要用来在多级组件之间传递参数，听起来有点抽象，咱们举个栗子：
考虑以下三个组件的嵌套关系，如果想把一个参数同时传给CascComp1和CascComp2应该如何做呢？
如果采用普通的Parameter，代码应该是这样的：
<!--this is CascCompSample.razor--> <h3>This is the sample page</h3> <CascComp1 NickName="沈先生"></CascComp1>
<!--this is CascComp1.razor-->
<h3>Comp1: @NickName</h3>
<CascComp2 NickName="@NickName"></CascComp2>
@code {
[Parameter]
public string NickName { get; set; }
}
<!--this is CascComp2.razor-->
<h3>Comp2: @NickName</h3>
@code {
[Parameter]
public string NickName { get; set; }
}
采用CascadingParameter会有什么不一样呢？请看：
<!--this is CascCompSample.razor-->
@page "/cascparamsample"
<h3>This is the sample page</h3>
<CascadingValue Value="NickName">
<CascComp1></CascComp1>
</CascadingValue>
@code
{
private string NickName = "沈先生";
}
<!--this is CascComp1.razor-->
<h3>Comp1: @NickName</h3>
<CascComp2></CascComp2>
@code {
[CascadingParameter]
public string NickName { get; set; }
}
<!--this is CascComp2.razor-->
<h3>Comp2: @NickName</h3>
@code {
[CascadingParameter]
public string NickName { get; set; }
}
看到区别了吗？
- 首先在CascCompSample.razor页面，我们通过把CascComp1嵌套到CascadingValue里面来传递参数。
- 其次在CascComp1和CascComp2，不再需要显式传递参数，只需要声明CascadingParameter即可拿到值。
CascadingValue组件的Value参数不能直接传递字符串，必须要声明一个变量
那么什么场景下需要用到这种方式呢？我想比较多的还是用来在多个组件之间共享上下文吧。
4. CascadingParameter如何传递多个参数
前面的例子我们通过CascadingParameter传递了一个参数，那么有没有办法传递多个参数呢？
当然可以，CascadingValue是支持嵌套的，你可以这样:
<!--this is CascCompSample.razor-->
@page "/cascparamsample"
<h3>This is the sample page</h3>
<CascadingValue Value="NickName">
<CascadingValue Value="36">
<CascComp1></CascComp1>
</CascadingValue>
</CascadingValue>
@code
{
private string NickName = "沈先生";
}
<!--this is CascComp1.razor-->
<h3>Comp1: @NickName - @Age</h3>
<CascComp2></CascComp2>
@code {
[CascadingParameter]
public string NickName { get; set; }
[CascadingParameter]
public int Age { get; set; }
}
Blazor是通过参数的类型来关联的，在外层通过CascadingValue传递了一个字符串和一个整数，在里层则通过类型匹配将字符串赋值给NickName，将整数赋值给Age。所以里层的参数名是可以随便取的，你可以把NickName改为FullName，并不会影响参数值的获取。
这个方式虽然可以少写一些代码，但是容易出错，而且如果碰到多个同类型的参数就无法处理了，笔者并不建议用这种方式。
除此之外，CascadingValue还有一个Name参数,可以给每个参数指定参数名，这样就可以显式的把各个组件的参数关联起来，笔者建议不管是一个参数还是多个参数都指定一个名字，这样可以尽量避免混淆，代码如下：
<!--this is CascCompSample.razor-->
@page "/cascparamsample"
<h3>This is the sample page</h3>
<CascadingValue Value="NickName" Name="NickName">
<CascadingValue Value="36" Name="Age">
<CascadingValue Value="Sex" Name="Sex">
<CascComp1></CascComp1>
</CascadingValue>
</CascadingValue>
</CascadingValue>
@code
{
private string NickName = "沈先生";
}
<!--this is CascComp1.razor-->
<h3>Comp1: @NickName - @Sex - @Age</h3>
<CascComp2></CascComp2>
@code {
[CascadingParameter(Name="NickName")]
public string NickName { get; set; }
[CascadingParameter(Name = "Sex")]
public string? Sex { get; set; }
[CascadingParameter(Name="Age")]
public int Age { get; set; }
}
需要注意的是如果在CascadingValue组件里面指定了Name参数，那么在所有CascadingParameter的地方也需要指定Name，否则就会找不到参数值。
以上就是关于《ASP.NET Core Blazor简介和快速入门二（组件基础之组件参数）》的全部内容，希望你有所收获。关注、点赞，持续分享。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）