カスケーディングパラメータ ― 階層を飛び越えて配る

導入

深くネストしたコンポーネントに、いちいち[Parameter]のバケツリレーで値を渡すのは大変です。「テーマ色」「ログイン中のユーザー」のように上から下へ広く配りたい値は、CascadingValueで一気に流し込めます。

説明

親で<CascadingValue>に包むと、その中のどの深さの子でも[CascadingParameter]で受け取れます。

@* --- 親：値を流し込む --- *@
<CascadingValue Value="theme">
    <Header />
    <Content />   @* この中の孫コンポーネントでも theme を受け取れる *@
</CascadingValue>

@code {
    private string theme = "dark";
}

@* --- 子/孫：どの深さでも受け取れる --- *@
<p class="@Theme">現在のテーマ: @Theme</p>

@code {
    [CascadingParameter] public string Theme { get; set; } = "light";
}

• <CascadingValue Value="...">で囲んだ範囲に値を配る
• 受け取る側は[CascadingParameter]。間のコンポーネントを経由しなくてよい
• テーマ・カルチャー・認証状態など「広く共有したい横断的な値」に向く
• ただし乱用は依存を見えにくくする。基本は[Parameter]、横断的なものだけカスケードに

まとめ

• CascadingValue／[CascadingParameter]で階層を飛び越えて値を配る
• バケツリレーを避けられるが、横断的な値に限定して使う
• より本格的な「アプリ全体の状態共有」はDIサービス（第6章）で行う

次回: 第4章。ページを分けて行き来する「ルーティング」に進みます。