Blazor如何實(shí)現(xiàn)組件嵌套傳遞值

這篇文章主要講解了“Blazor如何實(shí)現(xiàn)組件嵌套傳遞值”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Blazor如何實(shí)現(xiàn)組件嵌套傳遞值”吧！

實(shí)現(xiàn)創(chuàng)建一個(gè)Blazor Server空的應(yīng)用程序

創(chuàng)建一個(gè)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";
}

然后運(yùn)行程序 效果如圖

這里是一個(gè)簡(jiǎn)單的組件傳值。但是在使用復(fù)雜的傳值時(shí)是無(wú)法使用的

先展示一個(gè)錯(cuò)誤的用法

修改Tab.razor的代碼

<div>
    @Title
</div>

<h2>分界線</h2>

<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 = "標(biāo)題";

    private string Data = "Data數(shù)據(jù)展示";
}

運(yùn)行效果如圖，我們看到運(yùn)行的數(shù)據(jù)似乎混亂，這就是多個(gè)傳遞的時(shí)候出現(xiàn)的問(wèn)題，如何解決呢？我們繼續(xù)看下面

我們繼續(xù)來(lái)到Tab.razor 修改相關(guān)代碼 ，我們發(fā)現(xiàn)他們的區(qū)別就是在CascadingParameter參數(shù)中添加唯一名稱

<div>
    @Title
</div>

<h2>分界線</h2>

<div>
    @Data
</div>

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

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

然后來(lái)到Index.razor 修改相關(guān)代碼

@page "/"

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

@code{
    private string Title = "標(biāo)題";

    private string Data = "Data數(shù)據(jù)展示";
}

通過(guò)Name綁定到指定的箱套參數(shù)，這樣就保證了數(shù)據(jù)不會(huì)亂的問(wèn)題，如果存在多個(gè)參數(shù)需要箱套傳遞的話請(qǐng)使用類而不是但個(gè)參數(shù)，原因就是單個(gè)參數(shù)需要一個(gè)一個(gè)去傳遞并且指定Name，并且更容易維護(hù)，（可能有人問(wèn)為什么用nameo而不是字符串，當(dāng)你重命名的話很有用！）

感謝各位的閱讀，以上就是“Blazor如何實(shí)現(xiàn)組件嵌套傳遞值”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Blazor如何實(shí)現(xiàn)組件嵌套傳遞值這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！