Blazor笔记-Component interaction-Sharing data
更新记录#
注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html
点击查看
2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。
Component interaction-Sharing data approaches#
In Blazor, data can be shared between components using three approaches:
- CascadingParameter.
- Parameter.
- Transfer service.
CascadingParameter approach#
CascadingParameter is a feature in Blazor that allows passing data from an ancestor component to its descendant components in a hierarchical structure. It is not able to pass data between sibling components. The following image illustrates how data flows through a component tree using CascadingParameter:
在祖先组件中特性修饰参数
<CascadingValue Value="@MyParameter" Name="MyParameter">
<儿子组件/>
</CascadingValue>
[CascadingParameter]
public int MyParameter { get; set; } = 0;
在孙组件中使用
@{
[CascadingParameter(Name="MyParameter")]
public string MyProperty { get; set; };
}
如果有多个参数需要传递,加上Name参数即可
<CascadingValue Value="@Style1" Name="Style1">
<CascadingValue Value="@Style2" Name="Style2">
<子组件></子组件>
</CascadingValue>
</CascadingValue>
@{
public string Style1 { get; set; } = "Test Value";
public string Style2 { get; set; } = "Test Value";
}
Parameter approach#
Parameter is a feature for transmitting data from a parent component to its direct child components. However, it is essential to note that this approach does not allow passing data to sibling components or the children of the direct child. The following image illustrates how data flows through a component tree using Parameter:
In your child component, declare public properties that will receive the parameters passed from the parent component. You can use the [EditorRequired] attribute to mark a parameter as required. Additionally, you can set default values for the parameter by defining it in the getter and setter.
[EditorRequired]
[Parameter]
public string RequiredInputParameter { get; set; } = "";
事件
[Parameter]
public EventCallback ExampleInstanceChanged { get; set; }
Capture unmatched values
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } = new();
Transfer service approach#
Transfer service is a useful approach when you want all of your components to share a common data source or adopt a "single source of truth" approach. It is not restricted by the component tree and can pass data across all components within your website. The following image illustrates how data flows through a component tree using transfer service:
This approach allows you to centralize the data management and keep the state of your components consistent, making your application more maintainable and easier to test.
- Declare a transfer service
- Consume a transfer service
作者:重庆熊猫
出处:https://www.cnblogs.com/cqpanda/p/17596373.html
版权:本作品采用「不论是否商业使用都不允许转载,否则按3元1字进行收取费用」许可协议进行许可。
本文来自博客园,作者:重庆熊猫,转载请注明原文链接:https://www.cnblogs.com/cqpanda/p/17596373.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!