Blazor实现组件嵌套传递值的示例详解

摘要： 实现创建一个Blazor Server空的应用程序创建一个Tab.razor并且添加以下代码@Title@code {[CascadingParameter]public stri...

实现创建?=一个Blazor Server空的应用程序

创建一个Tab.razor并且添加以下代码

<DIv> @Title </div>  @code { [CascadingParameter] public string? Title { Get; set; } } 

修改Index.razor组件代码

@page "/"  <CascadingValue Value="Title"> <Tab/> </CascadingValue>  @code{ private string Title = "Index"; } 

然后运行程序 效果如图

这里是一个简单的组件传值。但是在使用复杂的传值时是无法使用的

先展示一个错误的用法

修改Tab.razor的代码

<div> @Title </div>  <h1>分界线</h1>  <div> @Data </div>  @code { [CascadingParameter] public string? Title { get; set; }  [CascadingParameter] public string? Data { get; set; } } 

并且修改index.razor代码

@page "/"  <CascadingValue Value="Title"> <CascadingValue Value="Data"> <Tab /> </CascadingValue> </CascadingValue>  @code{ private string Title = "标题";  private string Data = "Data数据展示"; } 

运行效果如图，我们看到运行的数据似乎混乱，这就是多个传递的时候出现的问题，如何解决呢？我们继续看下面

我们继续来到Tab.razor修改相关代码 ，我们发现他们的区别就是在CascadingParameter参数中添加唯一名称

<div> @Title </div>  <h1>分界线</h1>  <div> @Data </div>  @code { [CascadingParameter(Name = nameof(Title))] public string? Title { get; set; }  [CascadingParameter(Name = nameof(Name))] public string? Data { get; set; } } 

然后来到Index.razor修改相关代码

@page "/"  <CascadingValue Value="Title" Name="@nameof(Title)"> <CascadingValue Value="Data" Name="@nameof(Data)"> <Tab /> </CascadingValue> </CascadingValue>  @code{ private string Title = "标题";  private string Data = "Data数据展示"; } 

通过Name绑定到指定的箱套参数，这样就保证了数据不会乱的问题，如果存在多个参数需要箱套传递的话请使用类而不是但个参数，原因就是单个参数需要一个一个去传递并且指定Name，并且更容易维护，（可能有人问为什么用nameo而不是字符串，当你重命名的话很有用！）

到此这篇关于Blazor实现组件嵌套传递值的示例详解的文章就介绍到这了,更多相关Blazor组件嵌套传递值内容请搜索云初冀北以前的文章或继续浏览下面的相关文章希望大家以后多多支持云初冀北！

本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：Goliszhou@gmail.com