Blazor嵌套传递 - tokengo
source link: https://www.cnblogs.com/hejiale010426/p/17093811.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
实现创建一个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而不是字符串,当你重命名的话很有用!)
来自token的分享
Blazor技术交流群:452761192
本文作者:tokengo
本文链接:https://www.cnblogs.com/hejiale010426/p/17093811.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK