Blazor 子组件交互例子
1.Blazor入门100天 : 自做一个手势滑动组件2.Blazor入门100天 : 自做一个支持长按事件的按钮组件3.Blazor入门100天 : 身份验证和授权 (6) - 使用 FreeSql orm 管理ids数据4.Blazor入门100天 : 身份验证和授权 (3) - DB改Sqlite5.Blazor入门100天 : 身份验证和授权 (4) - 自定义字段6.Blazor入门100天 : 身份验证和授权 (5) - 本地化资源7.Blazor入门100天 : 身份验证和授权 (2) - 角色/组件/特性/过程逻辑8.Blazor入门100天 : 身份验证和授权 (1) - 建立带身份验证工程9.10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf10.Blazor组件自做十四 : Blazor FileViewer 文件预览 组件11.Blazor组件自做十二 : Blazor Pdf Reader PDF阅读器 组件 (新版 7.1 移除pdfobject)12.Blazor组件自做十三: VideoPlayer 视频播放器13.Blazor组件自做十二 : Blazor Pdf Reader PDF阅读器 组件(更新)14.Blazor组件自做十一 : File System Access 文件系统访问 组件15.Blazor组件自做十 : 光学字符识别 OCR 组件16.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)17.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)18.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)19.Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件20.Blazor组件自做五 : 使用JS隔离封装Google地图21.Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件22.Blazor组件自做三 : 使用JS隔离封装ZXing扫码23.Blazor组件自做二 : 使用JS隔离制作手写签名组件24.Blazor组件自做一 : 使用JS隔离封装viewerjs库
25.Blazor 子组件交互例子
26.20行代码写一个简单 Blazor 时钟组件27.Blazor 逐键搜索并动态反馈到url28.Blazor 通过组件虚拟化提高性能29.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [一]30.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [二]31.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [三]源码
子组件 SwitchBar.razor
@using Microsoft.Extensions.Logging
@inject ILogger<Index> Logger
<div style="@ClassString" @onclick="OnClick">
@ChildContent
</div>
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public int Value { get; set; }
[Parameter]
public EventCallback<int> ValueChanged { get; set; }
[Parameter]
public EventCallback<bool> Initiated { get; set; }
private string? ClassString => Value<5? "height:100px;color:red;" : "height:100px;color:green;";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(2000);
await Initiated.InvokeAsync(true);
}
}
private async Task OnClick()
{
Value ++;
if (ValueChanged.HasDelegate)
{
await ValueChanged.InvokeAsync(Value);
}
}
}
主组件页面 SwitchBarDemo.razor
@page "/SwitchBarDemo"
@using Microsoft.Extensions.Logging
@inject ILogger<Index> Logger
<SwitchBar ValueChanged="OnValueChanged" Initiated="OnInitiated">
<div>我是子组件1内容, 点击++</div>
</SwitchBar>
@*<SwitchBar ValueChanged="OnValueChanged">
<div>我是子组件2内容</div>
</SwitchBar>*@
<div style="@ClassString">
<h3>主组件</h3>
@message @Value
@for (int i = 0; i < Value2; i++)
{
<div>渲染 Table</div>
}
</div>
@code {
[Parameter]
public bool Value { get; set; }
int Value2;
string message = "我是主组件内容";
private string? ClassString => Value ? "height:200px;color:red;" : "height:100px;color:green;";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//message += "主组件加载";
//StateHasChanged();
//await Task.Delay(1000);
//message += ",主组件加载完成";
//StateHasChanged();
}
}
private async Task OnInitiated(bool val)
{
message += ",子组件加载完成(查询角色)";
StateHasChanged();
Value2 = 2;
Value = val;
await Task.Delay(1000);
StateHasChanged();
}
private Task OnValueChanged(int val)
{
Value2= val;
message += "子组件数据变化";
StateHasChanged();
return Task.CompletedTask;
}
}
运行效果
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/17969667
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇