하나의 razor파일을 컴포넌트라고 볼 수 있는데 서로 다른 컴포넌트에서 서로에 접근하기 위해 사용한다.

1번 컴포넌트 /dialog

//.razor파일임.

@page "/dialog"
<h3>Dialog</h3>

<div>
	<h1>@Title</h1>
    
	@ChildContent
    
	<button @onclick="OnYesClick">Yes</button>
</div>

<hr />
@message

@code {
	[Parameter]
	public string Title { get; set; }

	[Parameter]
	public RenderFragment ChildContent { get; set; }

	private string message = string.Empty;
	private void OnYes()
	{
		message = "Write to the console in C#! 'Yes' button was selected.";
	}
}

 

2번 컴포넌트 /

// .razor

@page "/"

<hr />

	<Dialog Title="MyBlazor">
		MyTest for dialog
	</Dialog>

 

1과 2는 각각 다른 컴포넌트이고 2에서 <Dialog ~~>의 코드를 통해 Dialog 컴포넌트를 불러왔고
Dialog 컴포넌트의 Parameter 중 Title도 변경할 수 있게 접근한 모습이다.

또한 2번의 경우 1번 컴포넌트를 모두 동일하게 보여주며,
2번 컴포넌트에서 끼워넣으려고 하는 "MyTest for Dialog"는 1번 컴포넌트 중 "@ChildContent"위치에 들어간다.

컴포넌트 1번 페이지

 

컴포넌트 2번 페이지

- 컴포넌트 1번의 Title은 초기 저장이 안 되어있는 상태라 출력X
- 추가한 "My Test for Dialog"가 중간에 끼워져있다.

+ Recent posts