响应式门户网站模板,网站平面模板,如何在已建设好的网站做修改,学校网站建设营运预算本文主要讨论Blazor事件内容#xff0c;由于blazor事件部分很多#xff0c;所以会分成上下两篇#xff0c;本文为第二篇。双向绑定概述如图所示当点击单项绑定的时候#xff0c;MyOnewayComponent里的属性值会发生变化#xff0c;这种变化是单项的#xff0c;仅仅只是本地… 本文主要讨论Blazor事件内容由于blazor事件部分很多所以会分成上下两篇本文为第二篇。双向绑定概述如图所示当点击单项绑定的时候MyOnewayComponent里的属性值会发生变化这种变化是单项的仅仅只是本地副本的值的变化并不会引发父页面的值发生变化。但当点击父页面的Click Me的时候会修改MyOnewayComponent的属性值会被修改。所以单项绑定强调的是占位以达到动态输出的目的。当点击双向绑定的时候三个值会同步发生变化。即便点击父页面的Click Me也不会覆盖掉MyTwoWayComponent的属性值这说明父页面和MyTwoWayComponent页面的值发生了双向绑定会导致数据同步变化。双向绑定绑定的是Blazor组件和dom元素就像是宏指令一样。也就是说当该组件首次运行时输入框的值来自于CurrentValue属性当用户输入新的值后CurrentValue也将会被设置成新的值。示例双向绑定有一个重要特征就是使用bind-进行数据绑定之前我创建了两个组件我们来看一下这两个组件的源代码MyOnewayComponentdivMyComponent CounterValue is CounterValue
/div
button onclickUpdateCounterValueUpdate/button
code {[Parameter]public int CounterValue { get; set; }void UpdateCounterValue(){CounterValue;}
}
MyTwoWayComponentdivMyComponent CounterValue is CounterValue
/div
button onclickUpdateCounterValueUpdate/button
code {[Parameter]public int CounterValue { get; set; }[Parameter]public EventCallbackint CounterValueChanged { get; set; }async Task UpdateCounterValue(){CounterValue;await CounterValueChanged.InvokeAsync(CounterValue);}
}
以上代码可以看到有明显的不同MyTwoWayComponent包含一个EventCallback类型的属性其命名是CounterValueChanged看起来像是属性值后缀Changed其调用方法也变成了async Task该方法表明当CounterValue发生变化的时候会通过CounterValueChanged来通知事件源页面该值发生了变化。额外尝试一下如果我们直接使用MyOnewayComponent 来演示双向绑定会发生什么我们使用如下代码运行一下看看MyOnewayComponent bind-CounterValuecurrentCount /
运行后发现报错了错误信息是Unhandled exception rendering component: Object of type BlazorApp.Client.Pages.MyOnewayComponent does not have a property matching the name CounterValueChanged。由此可见我们的命名规则是强制的其必须是所绑定EventCallBack的属性名后缀Changed。BuildTree源码#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\nbr\r\nbr\r\n\r\n);__builder.OpenComponentBlazorApp.Client.Pages.MyOnewayComponent(10);__builder.AddAttribute(11, CounterValue, Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheckSystem.Int32(
#nullable restorecurrentCount#line default
#line hidden
#nullable disable));__builder.AddAttribute(12, CounterValueChanged, Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.CreateInferredEventCallback(this, __value currentCount __value, currentCount));__builder.CloseComponent();
}
8-15行是单项绑定的内容16-18行是双向绑定的内容级联值和参数概述级联值和参数是一种将值从组件传递到其所有子组件的方法在Blazor中采用CascadingValue来实现子组件通过声明同一类型的属性用[CascadingParameter]属性修饰来收集并赋值。当级联值发生更新的时候这种更新将传递到所有的子组件同时这组件将会自动调用StateHasChanged 。一般情况下我们的CascadingValue中可能会需要传递多个值的变化那么这种变化是如何进行的呢。是通过两种方式一种是类型推导一种是命名传值。类型推导我创建了两个组件分别是FirstComponentSecondComponent。FirstComponent源码如下CascadingValue ValueCascadingIndexCascadingValue ValueCascadingNameSecondComponent/SecondComponent/CascadingValue
/CascadingValue
code {
int CascadingIndex 10000;string CascadingName FirstComponent;
}
SecondComponent源码如下h3SecondComponent/h3
pCascadingValue Is strongSecondValue/strong
/p
code {[CascadingParameter] int SecondValue { get; set; }
}
传值的过程中我们只有一个int类型的属性所以该值会显示10000如下图所示如果我们修改一下FirstComponent的源码将其中的string类型的属性删除掉同时增加一个新的int类型的属性如下源码所示运行结果如下由此可见当子组件遇到多个相同类型的属性的时候会选择离子组件最近的属性的值并传递到自己的属性中去。命名传值命名赋值就很单纯了主要考虑绑定正确的名称就行。修改后FirstComponent的源码如下需要指定Name CascadingValue ValueCascadingIndex NameCascadingIndexCascadingValue ValueTotal NameTotalSecondComponent/SecondComponent/CascadingValue
/CascadingValuecode {int CascadingIndex{ get; set; } 10000;int Total{ get; set; } 2;
}
SecondComponent源码如下可以指定名称已接收值的传递h3SecondComponent/h3
pCascadingValue Is strongSecondValue/strong
/p
code {[CascadingParameter(Name CascadingIndex)] int SecondValue { get; set; }
}
运行后的结果如下值又变回了10000有朋友可能会想我不想设置SecondComponent中CascadingParameter的Name值但是我可以设置成FirstComponent中某个已经绑定的Name的名称。如下所示FirstComponent源码不变SecondComponent源码如下h3SecondComponent/h3
pCascadingValue Is strongTotal/strong
/p
code {[CascadingParameter] int Total { get; set; }
}
运行结果如下所示由此可见不设置子组件中CascadingParameter的Name值是无法接收传递的值的。性能问题默认情况下Blazor会持续监控级联值的变化并将其传递到所有子组件中这将会占用一定的资源并可能导致性能问题。如果我们可以确定我们的级联值不会发生变化可以设置CascadingValue中参数IsFixed的值为true这样的Blazor就不会监控级联值的变化了。CascadingValue ValueCascadingIndex IsFixedtrueSecondComponent/SecondComponent
/CascadingValue
