日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Blazor實現組件嵌套傳遞值的示例詳解_其它綜合

作者：tokengo ? 更新時間： 2023-04-12 編程語言

實現創建一個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而不是字符串，當你重命名的話很有用！）

原文鏈接：https://www.cnblogs.com/hejiale010426/p/17093811.html

欄目分類
最近更新