[TIL] Vue.js/router-view v-slot

App.vue에서 라우터 이동을 담당하는 router-view객체는 컴포넌트를 slot 으로 네스팅하여 template을 통째로 전달할 수 있다.

vue의 내장객체인 메타 컴포넌트에 is속성으로 Component에 각 template을 전달하기 위해서는 v-slot을 사용하여 Component를 네스팅 해줘야하며 Component의 개별명칭은 라우터 파일에 정의하면 된다.

//App.vue

<template>
  <layout>
    <router-view v-slot="{ Component }">
      <keep-alive include="KeepAlive">
        <component
          :is="Component"
        />
      </keep-alive>
    </router-view>
    <loading-page />
  </layout>
</template>

• router-view에 v-slot으로 네스팅 된 Component는 메타컴포넌트의 is속성에 동적으로 전달된다.
• 화면에 렌더링되는 실제 컴포넌트는 메타컴포넌트의 is 에 따라 달라지며, Component의 이름이 is 속성에 바인딩 되어 나타난다.
• 다만 keep-alive 로 메타컴포넌트를 감싸고 있기 때문에 Component name이 "KeepAlive"로 명시된 컴포넌트는 화면이 재랜더링 되지 않고 기존 데이터가가 유지된다.

물론 router-view객체에 Component를 네스팅하지 않고도 화면이동 및 렌더링은 가능하다.
하지만 v-slot으로 Component를 네스팅함으로써
화면에 렌더링 될 실제 뷰페이지를 동적으로 제어할 수 있고, 뷰페이지의 template을 직접적으로 전달하여 App.vue 구조를 가시적으로 확인할 수 있다.