Blazor实现组件嵌套传递值的示例详解

<div>
    @Title
</div>

@code {
    [CascadingParameter]
    public string? Title { get; set; }
}

@page "/"

<CascadingValue Value="Title">
    <Tab/>
</CascadingValue>

@code{
    private string Title = "Index";
}

<div>
    @Title
</div>

<h1>分界线</h1>

<div>
    @Data
</div>

@code {
    [CascadingParameter]
    public string? Title { get; set; }

    [CascadingParameter]
    public string? Data { get; set; }
}

@page "/"

<CascadingValue Value="Title">
    <CascadingValue Value="Data">
        <Tab />
    </CascadingValue>
</CascadingValue>

@code{
    private string Title = "标题";

    private string Data = "Data数据展示";
}

<div>
    @Title
</div>

<h1>分界线</h1>

<div>
    @Data
</div>

@code {
    [CascadingParameter(Name = nameof(Title))]
    public string? Title { get; set; }

    [CascadingParameter(Name = nameof(Name))]
    public string? Data { get; set; }
}

@page "/"

<CascadingValue Value="Title" Name="@nameof(Title)">
    <CascadingValue Value="Data" Name="@nameof(Data)">
        <Tab />
    </CascadingValue>
</CascadingValue>

@code{
    private string Title = "标题";

    private string Data = "Data数据展示";
}