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