深入淺出Blazor webassembly之通過CascadingValue組件實現向子級組件傳值

在一般編程語言中, 向函數傳值通常有兩種方法, 一種是通過函數的參數傳值, 另一種是通過類屬性或全局變量實現.

向一個blazor 組件傳值, 與函數傳值非常像, 也有兩種基本形式:

(1) 通過給組件 parameter 傳值, 這與函數參數傳值類似, 已經在前面文章中介紹過, 形如 <Child Parameter1="V1"/>

(2) 通過 CascadingValue 組件下西甲組件撒值, 這與函數通過全局變量傳值類似, 不需要提供入參, 但需要形參, 而且傳值是雙向的, 本文重點講解這個.

CascadingValue是blazor內置組件, 可以使用該組件實現向下級組件傳值, 不需要他方法很簡單.

總體思路:

在父級組件中, 在子組件外頭包一個CascadingValue 組件, 通過CascadingValue組件的Value屬性將值傳到下級組件中, 最好是為該Value指定一個Name, 這樣能實現精準傳值.
在子組件的C#代碼中, 使用 CasacadingParameter注解修飾一個屬性, 在注解上加上Name參數, 對接上層組件傳入的那個Value.
CascadingValue 組件除了Value和Name屬性外, 還是一個IsFixed屬性, 如果傳值是一次性的, 最好將IsFixed設置為ture, 這樣渲染性能會更好一些.
一個 CascadingValue 組件只能傳一個值, 如果要傳多個值, 只需要加多個 CascadingValue 組件即可.

示例代碼的功能, 共有三層組件, 最頂層組件需要傳值到第二/三層組件, 控制它們的顯示樣式.

@*=================================*@
@*file:Parent.razor*@
@*=================================*@
@page "/parent"
<h1>Parent component with CascadingValue</h1>
<button type="button" class="btn btn-primary" @onclick="@ChangeChildStyle">Change Child in Green</button>
<button type="button" class="btn btn-primary" @onclick="@ChangeGrandChildStyle">Change Grandchild in Green</button>
<CascadingValue Value="@ChildStyle1" Name="ChildStyle" IsFixed="false">
    <CascadingValue Value="@GrandChildStyle1" Name="GrandChildStyle" IsFixed="false">
        <Child></Child>  @*注意: 這里沒有入參 *@
    </CascadingValue>
</CascadingValue>


@code {
    public string ChildStyle1 = "color:blue";
    public string GrandChildStyle1 = "color:red";
    void ChangeChildStyle()
    {
        ChildStyle1 = "color:green";
    }
    void ChangeGrandChildStyle()
    {
        GrandChildStyle1 = "color:green";
    }
}

@*=================================*@
@*file:Child.razor*@
@*=================================*@
<h1 style="@ChildStyle2"> Child component</h1>
<GrandChild></GrandChild>
@code{
    [CascadingParameter(Name="ChildStyle")]
    public string ChildStyle2{get ;set;} 
}

@*=================================*@
@*file:GrandChild.razor*@
@*=================================*@
<h1 style="@GrandChildStyle2"> GrandChild component</h1>
@code{
      [CascadingParameter(Name="GrandChildStyle")]    
      public string GrandChildStyle2{get ;set; }
}

UI的初始效果:

點擊按鈕后的效果:

posted @ 2021-08-22 20:50 harrychinese 閱讀(662) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

深入淺出Blazor webassembly之通過CascadingValue組件實現向子級組件傳值

公告