Slot에 이어 Special Elements로 분류되는 Component에 대해 알아보자.

component

1. 역할

메타 컴포넌트인 component는 컴포넌트나 엘리먼트의 동적 렌더링을 위해 사용한다. is 속성을 props로 전달받으며, props의 타입은 string으로 HTML 태그명 혹은 커스텀 컴포넌트명이 될 수 있다.

2. 예시

// Layout.vue

<template>
    <component :is="layout"> 
    	<slot></slot> 
    </component>/>
</template>

<script>
import Default from '@/views/DefaultLayout'
import Clear from '@/views/ClearLayout'
import { useRoute } from 'vue-router'
import { computed } from 'vue'

export default {
  components: {
    Clear,
    Default,
  },

  setup() {
    const route = useRoute()
    const layout = computed(() => {
      const layoutList = {
        Default: 'Default',
        Clear: 'Clear',
      }
      return layoutList[route.meta.layout] ?? 'Default'
    })

    return {
      layout,
    }
  },
}
</script>

• component의 is속성은 layout의 return값을 동적으로 렌더링한다.
• layout의 리턴값은 route객체의 meta 프로퍼티에서 layout이라는 key값에 value값('Clear로 지정됨')이
  있으면 해당 value값이, 없으면 'Default'가 is로 매핑된다.
• component로 등록되어 있는 'Clear' 혹은 'Default' 가 렌더링 할 컴포넌트로써 사용되며, is속성을 사용하면 어떤 컴포넌트가 바인딩 되든 재랜더링 된다.