Component 간 데이터 공유 - CascadingParameter

계단식 매개변수는 상위 구성요소에서 하위 구성요소로 매개변수를 전달할 수 있게 해주는 기술

 

1. GrandParent Component 의 공용 속성을 선언 및 전달

Pages/GrandParent.razor

@page "/interaction/cascadingparameters"
<h3>GrandParent</h3>
<CascadingValue Value="Data">
    <Parent />
</CascadingValue>
@code {
    public string Data { get; set; } = "from GrandParent";
}

 

2. Parent Component 에서 해당 값 받기

Pages/Parent.razor

<h3>Parent</h3>
<div>Received value at grand parent:  <span class="text-danger">@ReceivedData</span></div>
 <Child />

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

 

3. Chile Component 에서 해당 값 받기

Pages/Child.razor

<h3>Child</h3>

<h1>@ReceivedData</h1>
@code {
    [CascadingParameter]
    public string ReceivedData { get; set; } = "";
}

 

 

여러 매개변수 전달 

Pages/GrandParent.razor

@page "/interaction/multicascadingparameters"
<h3>GrandParent</h3>
<CascadingValue Value="Data1">
    <CascadingValue Value="Data2" Name="CascadeParam2">
    <Parent />
    </CascadingValue>
</CascadingValue>
@code {
    public string Data1 { get; set; } = "Multi Cascade Data1";
    public string Data2 { get; set; } = "Multi Cascade Data2";
}

Pages/Parent.razor

<h3>Parent</h3>
<div>Data1:  <span class="text-danger">@Data1</span></div>
<div>Data2:  <span class="text-danger">@Data2</span></div>
 <Child />

@code {
    [CascadingParameter]
    public string Data1 { get; set; } = "";
    [CascadingParameter(Name = "CascadeParam2")]
    public string Data2 { get; set; } = "";
}

Pages/Child.razor

 

<h3>Child</h3>

<h1>@Data1</h1>
<h1>@Data2</h1>
@code {
    [CascadingParameter]
    public string Data1 { get; set; } = "";
    [CascadingParameter(Name = "CascadeParam2")]
    public string Data2 { get; set; } = "";
}

 

 

 

관련영상

https://youtu.be/KerW1cGG8J8