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="btn btn-primary" @onclick="@ChangeGrandChildStyle">Change Grandchild in Green</button>
<CascadingValue Value="@ChildStyle1" Name="ChildStyle" IsFixed="false">
<CascadingValue Value="@GrandChildStyle1" Name="GrandChildStyle" IsFixed="false">
<Child></Child>
</CascadingValue>
</CascadingValue>
@code {
public string ChildStyle1 = "color:blue";
public string GrandChildStyle1 = "color:red";
void ChangeChildStyle()
{
ChildStyle1 = "color:green";
}
void ChangeGrandChildStyle()
{
GrandChildStyle1 = "color:green";
}
}
@*=================================*@
@*file:Child.razor*@
@*=================================*@
<h1 style="@ChildStyle2"> Child component</h1>
<GrandChild></GrandChild>
@code{
[CascadingParameter(Name="ChildStyle")]
public string ChildStyle2{get ;set;}
}
@*=================================*@
@*file:GrandChild.razor*@
@*=================================*@
<h1 style="@GrandChildStyle2"> GrandChild component</h1>
@code{
[CascadingParameter(Name="GrandChildStyle")]
public string GrandChildStyle2{get ;set; }
}
UI的初始效果:
点击按钮后的效果: