Blazor 子组件交互例子

Densen2014

于 2024-02-11 11:04:32 发布

阅读量299

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/alex_zoucn/article/details/136085947

本文介绍了如何在Razor页面中使用SwitchBar.razor子组件，展示了参数传递、事件触发和状态更新的过程。主组件通过事件回调响应子组件的值更改并更新自身内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码

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