Component 간 데이터 공유 - Parameter

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법

또한 url 을 통해 parameter 를 전달 하기도 한다. 

 

Pages/Parent.razor

@page "/interaction/parameters"
<h3>Parent</h3>
<Child RequiredInputParameter=@SecondData/>
<p />
<Child InputParameter=@FirstData RequiredInputParameter=@SecondData/>

@code {
    public string FirstData { get; set; } = "First data";
    public string SecondData { get; set; } = "Second data";
}

Pages/Child.razor

<h3>Child</h3>

<h1>@InputParameter</h1>
<h1>@RequiredInputParameter</h1>
@code {
    [Parameter]
    public string InputParameter { get; set; } = "Default Value";

    [EditorRequired]
    [Parameter]
    public string? RequiredInputParameter { get; set; } = "";
}

URL 을 통해 parameter 을 전달 하기도 한다. 

Pages/Child.razor

@page "/interaction/parameter-child/{inputparameter?}/{requiredinputparameter?}"
<h3>Child</h3>

<h1>@InputParameter</h1>
<h1>@RequiredInputParameter</h1>
@code {
    [Parameter]
    public string InputParameter { get; set; } = "Default Value";

    [EditorRequired]
    [Parameter]
    public string? RequiredInputParameter { get; set; } = "";
}

 

/interaction/parameter-child/aaa/requiredBbb

 

 

Parent 로 부터 Parameter 의 변경 감지

child 의 OnParameterSet 을 통해 변경을 감지 할 수 있다. 

 

Child

@inject IJSRuntime JSRuntime
<h3>Child</h3>

<h1>@InputParameter</h1>
<h1>@RequiredInputParameter</h1>
@code {
    [Parameter]
    public string InputParameter { get; set; } = "Default Value";

    [EditorRequired]
    [Parameter]
    public string? RequiredInputParameter { get; set; } = "";

    protected override void OnParametersSet()
    {
        JSRuntime.InvokeVoidAsync("alert", $"ParameterChanged");
    }
}

 

Parent

@page "/interaction/parameters/changes"
<div>
<h3>Parent</h3>
<DetectChangesChild RequiredInputParameter=@SecondData/>
<p />
<DetectChangesChild InputParameter=@FirstData RequiredInputParameter=@SecondData/>
</div>
<button @onclick="OnChangeParameter">Changed Parameter</button>

@code {
    public string FirstData { get; set; } = "First data";
    public string SecondData { get; set; } = "Second data";

    public void OnChangeParameter()
    {
        FirstData = "changed first data";
    }

}

 

 

 

자식 components 의 data 변경이 parent에 전달 되게 하려면

Parent

@page "/interaction/parameters/callback"

<h3>Parent</h3>
<div><span class="text-danger">@FirstData</span></div>
<CallbackChild InputParameter=@FirstData ChildValueChanged=OnChildValueChanged/>
@code {
    public string FirstData { get; set; } = "First data";

    public void OnChildValueChanged(string data)
    {
        FirstData =data;
        StateHasChanged();       
    }

}

Child

<h3>Child</h3>

<h1>@InputParameter</h1>
<button @onclick="UpdateValue">Changed parameter in child</button>

@code {
    [Parameter]
    public string InputParameter { get; set; } = "Default Value";

    [Parameter]
    public Action<string> ChildValueChanged { get; set; } = _ => { };

    public void UpdateValue()
    {
        InputParameter = "changed default value";
        ChildValueChanged?.Invoke(InputParameter);
    }
}

 

 

 

관련영상

https://youtu.be/2K5BQqOHNa4