Blazor巢狀傳遞

tokengo發表於2023-02-05
Blazor巢狀

實現建立一個Blazor Server空的應用程式

建立一個Tab.razor 並且新增以下程式碼

<div>
    @Title
</div>

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

修改Index.razor元件程式碼

@page "/"

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

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

然後執行程式 效果如圖

這裡是一個簡單的元件傳值。但是在使用複雜的傳值時是無法使用的

先展示一個錯誤的用法

修改Tab.razor的程式碼

<div>
    @Title
</div>

<h1>分界線</h1>

<div>
    @Data
</div>

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

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

並且修改index.razor程式碼

@page "/"

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

@code{
    private string Title = "標題";

    private string Data = "Data資料展示";
}

執行效果如圖，我們看到執行的資料似乎混亂，這就是多個傳遞的時候出現的問題，如何解決呢？我們繼續看下面

我們繼續來到Tab.razor 修改相關程式碼 ，我們發現他們的區別就是在CascadingParameter引數中新增唯一名稱

<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; }
}

然後來到Index.razor 修改相關程式碼

@page "/"

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

@code{
    private string Title = "標題";

    private string Data = "Data資料展示";
}

透過Name繫結到指定的箱套引數，這樣就保證了資料不會亂的問題，如果存在多個引數需要箱套傳遞的話請使用類而不是但個引數，原因就是單個引數需要一個一個去傳遞並且指定Name，並且更容易維護，（可能有人問為什麼用nameo而不是字串，當你重新命名的話很有用！）

來自token的分享

Blazor技術交流群：452761192

相關文章