深入浅出Blazor webassembly之通过CascadingValue组件实现向子级组件传值

最新推荐文章于 2023-09-25 13:49:19 发布

原创

最新推荐文章于 2023-09-25 13:49:19 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#c# #vue #html #javascript #unity

CascadingValue 组件是blazor内置组件, 可以使用该组件实现向下级组件传值, 方法很简单.

总体思路:

在父级组件中, 在子组件外头包一个CascadingValue 组件, 通过CascadingValue组件的Value属性将值传到下级组件中, 最好是为该Value指定一个Name, 这样能实现精准传值.
在子组件的C#代码中, 使用 CasacadingParameter注解修饰一个属性, 在注解上加上Name参数, 对接上层组件传入的那个Value.
CascadingValue 组件除了Value和Name属性外, 还是一个IsFixed属性, 如果传值是一次性的, 最好将IsFixed设置为ture, 这样渲染性能会更好一些.
一个 CascadingValue 组件只能传一个值, 如果要传多个值, 只需要加多个 CascadingValue 组件即可.

示例代码的功能, 共有三层组件, 最顶层组件需要传值到第二/三层组件, 控制它们的显示样式.

@*=================================*@
@*file:Parent.razor*@
@*=================================*@
@page "/parent"
<h1>Parent component with CascadingValue</h1>
<button type="button" class="btn btn-primary" @onclick="@ChangeChildStyle">Change Child in Green</button>
<button type="button" class