iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1
Modern Web

大內魔術 Blazor - 誰說前端一定要寫JS系列 第 16

魔術技巧 - 傳值技巧

  • 分享至 

  • xImage
  •  

今天是中秋節,祝大家中秋節快樂,今天要介紹的主題,雖然篇幅不多,但也是一個很重要的技巧。

在我們開發元件的時候,除了畫面重複需要抽離外,有時候參數也可以共享,例如元件的樣式統一由外部管理,但如果是用之前的父子溝通技巧來實作,就會顯得相當麻煩,此時第二種溝通技巧就派上用場了。


級聯值和參數提供一個便利的方式,讓元件能夠提供值給底下的所有子元件,只需要兩個步驟:

  1. 傳遞方元件使用 CascadingValue 元件如:
<CascadingValue Name="CascadeParam1"
                Value="CascadeParam1">
  <Child></Child>
</CascadingValue>
  1. 接收方元件的參數增加 CascadingParameter 屬性如:
[CascadingParameter(Name = "CascadeParam1")]
protected string CascadeParam1 { get; set; }

這樣一來只要有元件使用 CascadingValue 元件來設定值,在 CascadingValue 元件底下所有的子元件都能夠準確接收其內容,是不是很簡單呀!但實際上的行為是,參數如果加了 CascadingParameter 屬性變成級聯參數,則會自動依照規則從上層元件中找到對應的級聯元件,並取得其值。

這邊重點介紹幾個 CascadingValue 元件的屬性成員:

  • Name(string) - 選填,設定名稱,通過指定名稱,使後代組件能夠接收值;如果未指定名稱,則子代組件將根據它們所請求的類型來接收值。

  • Value(TValue) - 提供的值。

  • IsFixed(Boolean) - 如果為 true,則表示在元件的生命週期內 Value 不會更改;用於性能優化,使框架跳過設定的更改通知,用於此情況才會特別標識。

CascadingParameter 屬性就很簡單,只有一個屬性 Name

  • 設定時,規則為尋找名稱相同最接近CascadingValue 元件。

  • 沒有設定時,規則為尋找型別相同最接近並且沒有命名CascadingValue 元件。

只要掌握這個規則,在撰寫時就不會有搞不清楚的狀況了。


以上就是使用級聯值與參數的方法了,若想看範例程式可以到範例程式碼 - day16觀看。

感謝大家的閱讀,我們明天見。

參考資料
ASP.NET Core Blazor 級聯值和參數


上一篇
魔術技巧 - 客製化輸入元件
下一篇
魔術技巧 - 樣板化元件
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言