CascadingParameter — CompileDaily Study

Penjelasan

CascadingValue/[CascadingParameter] mengatasi masalah passing Parameter berulang di banyak level component — setara Context API React atau provide/inject Vue. Component leluhur membungkus turunannya dengan <CascadingValue Value="data">, lalu component keturunan mana pun bisa mengakses lewat [CascadingParameter] TANPA passing manual di tiap level perantara.

Contoh Konsep

@* App.razor (leluhur) *@
<CascadingValue Value="tema">
    <Halaman />
</CascadingValue>

@code {
    private string tema = "terang";
}

@* TombolTema.razor (keturunan, level berapa pun) *@
<button>Tema: @Tema</button>

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

Praktikum

Di component leluhur, buat properti UserDto user (record dengan Nama), bungkus turunannya dengan <CascadingValue Value="user">. Buat component ProfilUser.razor dengan [CascadingParameter] UserDto User, tampilkan namanya.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Sama seperti Context di React, CascadingParameter BUKAN pengganti universal untuk semua berbagi data — paling berguna untuk data yang benar-benar lintas banyak level, bukan sekadar antar dua component bertetangga (untuk itu, [Parameter] biasa tetap lebih sederhana).