[Vue.js] 빌트인 컴포넌트 - component와 is

 

Vue의 Built-In Components

 

◽ component

이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다.

렌더링 할 실제 컴포넌트는 is prop에 의해 결정된다.

 

 

◽ is 속성

is 속성에는 문자열이나 컴포넌트 이름을 넣는다. 

 

 

◽ 예제

<!-- is 속성에 해당되는 컴포넌트가 렌더링된다. -->
<component :is="componentId"></component>

<!-- 동적 컴포넌트는 등록된 컴포넌트나 prop로 전달된 컴포넌트를 렌더힝 할 수 있다. -->
<component :is="$options.components.child"></component>

<!-- 동적 컴포넌트는 문자열로 컴포넌트를 참조할 수 있다. -->
<component :is="condition ? 'HeaderComp' : 'FooterComp'"></component> 

<!-- 동적 컴포넌트는 네이티브 HTML 엘리먼트를 렌더링 할 수도 있다. -->
<component :is="href ? 'a' : 'span'"></component>

 

 

◽ keep-alive를 사용하는 동적 컴포넌트

is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다.

그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 <keep-alive> 엘리먼트로 감싼다.

<keep-alive>
	<component :is="cntComponent"></component>
</keep-alive>

 

 

 

출처

https://v3.ko.vuejs.org/api/built-in-components.html#component

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.