本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇。
如图所示
双向绑定有一个重要特征就是使用@bind-进行数据绑定,之前我创建了两个组件,我们来看一下这两个组件的源代码:MyOnewayComponent:
<div>
MyComponent CounterValue is @CounterValue
</div>
<button @onclick=UpdateCounterValue>Update</button>
@code {
[Parameter]
public int CounterValue { get; set; }
void UpdateCounterValue()
{
CounterValue++;
}
}
MyTwoWayComponent:
<div>
MyComponent CounterValue is @CounterValue
</div>
<button @onclick=UpdateCounterValue>Update</button>
@code {
[Parameter]
public int CounterValue { get; set; }
[Parameter]
public EventCallback<int> CounterValueChanged { get; set; }
async Task UpdateCounterValue()
{
CounterValue++;
await CounterValueChanged.InvokeAsync(CounterValue);
}
}
以上代码可以看到有明显的不同,MyTwoWayComponent包含一个EventCallback类型的属性,其命名是CounterValueChanged,看起来像是属性值后缀Changed,其调用方法也变成了async Task,该方法表明,当CounterValue发生变化的时候,会通过CounterValueChanged来通知事件源页面该值发生了变化。额外尝试一下,如果我们直接使用MyOnewayComponent 来演示双向绑定,会发生什么,我们使用如下代码运行一下看看:
<MyOnewayComponent @bind-CounterValue="@currentCount" />
运行后,发现报错了,错误信息是:Unhandled exception rendering component: Object of type 'BlazorApp.Client.Pages.MyOnewayComponent' does not have a property matching the name 'CounterValueChanged'。由此可见,我们的命名规则是强制的,其必须是所绑定EventCallBack的属性名后缀Changed。
#pragma warning disable 1998
protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
{
__builder.AddContent(8, "Click me");
__builder.CloseElement();
__builder.AddMarkupContent(9, "\r\n<br>\r\n<br>\r\n\r\n");
__builder.OpenComponent<BlazorApp.Client.Pages.MyOnewayComponent>(10);
__builder.AddAttribute(11, "CounterValue", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Int32>(
#nullable restore
currentCount
#line default
#line hidden
#nullable disable
));
__builder.AddAttribute(12, "CounterValueChanged", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.CreateInferredEventCallback(this, __value => currentCount = __value, currentCount));
__builder.CloseComponent();
}
级联值和参数是一种将值从组件传递到其所有子组件的方法,在Blazor中,采用CascadingValue来实现,子组件通过声明同一类型的属性(用[CascadingParameter]属性修饰)来收集并赋值。当级联值发生更新的时候,这种更新将传递到所有的子组件,同时这组件将会自动调用StateHasChanged 。一般情况下,我们的CascadingValue中可能会需要传递多个值的变化,那么这种变化是如何进行的呢。是通过两种方式,一种是类型推导,一种是命名传值。
我创建了两个组件,分别是FirstComponent,SecondComponent。FirstComponent源码如下:
<CascadingValue Value="@CascadingIndex">
<CascadingValue Value="@CascadingName">
<SecondComponent></SecondComponent>
</CascadingValue>
</CascadingValue>
@code {
int CascadingIndex = 10000;
string CascadingName = "FirstComponent";
}
SecondComponent源码如下:
<h3>SecondComponent</h3>
<p>
CascadingValue Is <strong>@SecondValue</strong>
</p>
@code {
[CascadingParameter] int SecondValue { get; set; }
}
传值的过程中,我们只有一个int类型的属性,所以该值会显示10000,如下图所示:
如果我们修改一下FirstComponent的源码,将其中的string类型的属性删除掉,同时增加一个新的int类型的属性,如下源码所示:运行结果如下:
由此可见,当子组件遇到多个相同类型的属性的时候,会选择离子组件最近的属性的值并传递到自己的属性中去。
命名赋值就很单纯了,主要考虑绑定正确的名称就行。修改后FirstComponent的源码如下,需要指定Name
<CascadingValue Value="@CascadingIndex" Name="CascadingIndex">
<CascadingValue Value="@Total" Name="Total">
<SecondComponent></SecondComponent>
</CascadingValue>
</CascadingValue>
@code {
int CascadingIndex{ get; set; } = 10000;
int Total{ get; set; } = 2;
}
SecondComponent源码如下,可以指定名称已接收值的传递
<h3>SecondComponent</h3>
<p>
CascadingValue Is <strong>@SecondValue</strong>
</p>
@code {
[CascadingParameter(Name = "CascadingIndex")] int SecondValue { get; set; }
}
运行后的结果如下,值又变回了10000,
有朋友可能会想,我不想设置SecondComponent中CascadingParameter的Name值,但是我可以设置成FirstComponent中某个已经绑定的Name的名称。如下所示:FirstComponent源码不变,SecondComponent源码如下:
<h3>SecondComponent</h3>
<p>
CascadingValue Is <strong>@Total</strong>
</p>
@code {
[CascadingParameter] int Total { get; set; }
}
运行结果如下所示:
由此可见,不设置子组件中CascadingParameter的Name值,是无法接收传递的值的。
默认情况下,Blazor会持续监控级联值的变化,并将其传递到所有子组件中,这将会占用一定的资源,并可能导致性能问题。如果我们可以确定,我们的级联值不会发生变化,可以设置CascadingValue中参数IsFixed的值为true,这样的Blazor就不会监控级联值的变化了。
<CascadingValue Value="@CascadingIndex" IsFixed="true">
<SecondComponent></SecondComponent>
</CascadingValue>
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有