자식 컴포넌트 간 메소드 호출

1. EventCallback을 이용한 자식 컴포넌트 간 이벤트 호출

Blazor에서 자식 컴포넌트 간에 이벤트를 호출하려면, 부모 컴포넌트가 자식 컴포넌트에 이벤트를 처리하는 방법을 정의하고, 자식 컴포넌트는 해당 이벤트를 호출하는 방식으로 작업합니다.

1.1. 예제 시나리오

• ParentComponent (부모 컴포넌트)는 두 개의 자식 컴포넌트를 포함합니다.
• ChildComponentA는 ChildComponentB에 이벤트를 발생시키도록 합니다.
• ChildComponentB는 부모로부터 전달받은 이벤트를 처리합니다.

2. 부모 컴포넌트: 이벤트 호출 전달

부모 컴포넌트에서는 자식 컴포넌트들에게 EventCallback을 사용하여 이벤트를 전달합니다.

 

@page "/parent"

<h3>Parent Component</h3>

<!-- ChildComponentA에 이벤트 핸들러 전달 -->
<ChildComponentA OnTriggerEvent="HandleEventFromChildA" />

<!-- ChildComponentB에서 발생한 이벤트를 처리할 공간 -->
<ChildComponentB OnEventTriggered="HandleEventFromChildB" />

<p>@message</p>

@code {
    private string message = "No events triggered yet.";

    // ChildComponentA에서 이벤트 발생시 호출되는 메서드
    private void HandleEventFromChildA()
    {
        message = "Event triggered from ChildComponentA!";
    }

    // ChildComponentB에서 발생한 이벤트를 처리하는 메서드
    private void HandleEventFromChildB()
    {
        message = "Event triggered from ChildComponentB!";
    }
}

3. 자식 컴포넌트 A: 이벤트 발생

ChildComponentA는 버튼 클릭 시 부모에게 이벤트를 알립니다. 부모는 OnTriggerEvent라는 EventCallback을 통해 이 이벤트를 처리합니다.

ChildComponentA.razor

<h4>Child Component A</h4>

<button @onclick="TriggerEvent">Trigger Event to Parent</button>

@code {
    // 부모 컴포넌트에게 이벤트를 전달할 EventCallback
    [Parameter] public EventCallback OnTriggerEvent { get; set; }

    private async Task TriggerEvent()
    {
        // 버튼 클릭 시 부모에게 이벤트 발생
        await OnTriggerEvent.InvokeAsync();
    }
}

4. 자식 컴포넌트 B: 이벤트 처리

ChildComponentB는 버튼 클릭 시 부모에게 이벤트를 알리고, 부모가 그 이벤트를 처리할 수 있도록 EventCallback을 사용합니다.

ChildComponentB.razor

<h4>Child Component B</h4>

<button @onclick="TriggerEvent">Trigger Event to Parent</button>

@code {
    // 부모 컴포넌트에게 이벤트를 전달할 EventCallback
    [Parameter] public EventCallback OnEventTriggered { get; set; }

    private async Task TriggerEvent()
    {
        // 버튼 클릭 시 부모에게 이벤트 발생
        await OnEventTriggered.InvokeAsync();
    }
}