host
host 속성을 사용하면 요소의 호스트 컴포넌트 인스턴스를 얻을 수 있습니다. 이는 컴포넌트 내부에서 호스트 컴포넌트의 데이터와 메서드에 접근하는 데 매우 유용합니다.
아래는 host 속성을 사용하여 호스트 컴포넌트의 인스턴스를 가져오는 예시입니다:
Username: {{username}}
Response: {{response}}
이 예제에서는 사용자 정의 컴포넌트 user-card를 생성하고, 컴포넌트 내부에서 this.host를 통해 호스트 컴포넌트(페이지)의 메서드 sayHi에 접근하여 컴포넌트와 호스트 간의 상호작용을 구현했습니다.
요소가 컴포넌트나 페이지 모듈 내에 없을 경우, host의 값은 null이 됩니다. 예:
-
I am target
-
이 예시에서 #target 요소는 body 아래에 있으며, 어떤 컴포넌트나 페이지 내부에 있지 않으므로 $("#target").host의 값은 null입니다.