Blazor 子组件交互例子

源码

子组件 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;
    }
}

运行效果

相关推荐
4Forsee16 小时前
【Android】View 交互的事件处理机制
android·交互
眠りたいです17 小时前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
安卓开发者1 天前
鸿蒙Next ArkWeb网页交互管理:从基础到高级实战
华为·交互·harmonyos
油炸自行车2 天前
【Qt】编写Qt自定义Ui控件步骤
开发语言·c++·qt·ui·自定义ui控件·qt4 自定义ui控件
酷飞飞2 天前
PyQt 界面布局与交互组件使用指南
python·qt·交互·pyqt
木头左2 天前
讯飞星火大模型Spark4.0Ultra的WebSocket交互实现解析
websocket·网络协议·交互
IT古董2 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
死也不注释2 天前
【Unity UGUI 交互组件——InputFild(TMP版本)(11)】
unity·游戏引擎·交互
EQ-雪梨蛋花汤3 天前
【VR音游】音符轨道系统开发实录与原理解析(OpenXR手势交互)
交互·vr
python_1363 天前
MCP模型上下文协议以及交互流程
交互·mcp