(註：昨天不小心把 Reset 按鈕的 type 改成 button，今天改回 reset。)
我們目前建立了 3 個元件，Blog、Post 及 MyButton，如果想讓 3 個元件的字體顏色或是尺寸都一樣，似乎得先在 MyButton 定義一個帶有 [Parameter] attribute 的變數，Post 呼叫時再填入值，Post 同樣定義變數，Blog 呼叫時再填入，每個環節都要這樣做。
前面講過父元件想將資料傳遞到子元件內的就是靠 Parameter，有沒有類似 Parameter 不過可以一次傳遞到底下所有元件的方法呢？
這時候就要用到 CascadingValue 這個元件了，cascading 的意思是「級聯、噴瀉」，可以將其理解為「由上而下注入」，前端用的 CSS 全名就是 Cascading Style Sheet（層級式樣式表）。
我們先在 BlogBase.razor.cs 加入一個 Property ColorStyle（註：筆者之前檔案取名有誤，這篇改為 BlogBase.razor.cs），其值為 "color: goldenrod"。
接著在 Blog.razor 用 <CascadingValue Value="ColorStyle"> 將 <Post> 包住。
再於 PostBase.razor.cs 定義同名變數，不過多了 [CascadingParameter] attribute。
然後只要在想要套用的地方填寫該變數即可。
MyButton 也是一樣的用法。
雖然每個元件都還是要定義一個變數去承接最上層來的變數，不過可以看到 [CascadingParameter] 省去了在 PostBase.razor 呼叫 <MyButton> 必須填值的步驟。
那如果有兩個值要這樣層層傳遞呢？沒錯，就是包兩層 <CascadingValue> 即可，但真的寫了會發現，怎麼會套用兩個 color style 呢？
[站長註：上下有差異，上面是站長調試結果，下面是原文截圖]
因為 <CascadingValue> 認識的是變數類型，如果類型不同可以方便套用，但如果有兩個 string，則子元素只會套用最靠近的 <CascadingValue>，以圖片為例就是 ColorStyle。
為了解決這問題，可以使用裡面的 Name 變數，如此一來元件之間就會認識這個 <CascadingValue> 的名字，如果子元件找不到該 Name 就會回傳空白。
從上面的範例可以知道每次 <CascadingValue> Blazor 都會層層通知下層元件，但如果不希望每次都通知佔用資源呢？可以用 IsFixed，將其設為 true，Blazor 就不會去通知子元件了。
引用：
- Blazor cascading values and parameters
- Blazor multiple cascading parameters
- Blazor cascading values performance
註：本文程式碼透過 .NET 6 + Visual Studio 2022 重構，可點選原文連結與重構後程式碼比較學習，謝謝閱讀，支持原作者