[vue3] v-for을 활용한 slot

프로젝트 개발중 윈도우 팝업 내부 이중탭(다중이 될 수도 ..)으로 구성된 컴포넌트를 개발 해야될 일이 생겼다.

v-for을 활용해 slot을 정의하면? slot이 v-for을 활용해 동적으로 선언해도 정상적으로 동작할까?
스택오버플로우나 공식문서에도 해당 경우가 없어, 내가 길을 터보기로 한다.(옳은 방법이 아닌가?)

자 동적으로 선언한 v-slot을 활용해 현재 탭에 해당되는 content를 노출시켜보자 !

구성은

window.open으로 라우팅할 최상위 부모 컴포넌트
네이게이션 탭과 기본적인 레이아웃을 잡아주는 컴포넌트
화면 1
화면 2

위와 같은 레벨로 구성

/*****   최상위부모   *****/
  <multi-tap-modal-layout :multiTapInfo="multiTapInfo">
    //화면 1,2컴포넌트가 될 존재들
    <template v-slot:first> 
      <div>first-content</div> 
    </template>
    <template v-slot:second>
      <div>second-content</div>
    </template>
  </multi-tap-modal-layout>

   import multiTapModalLayout from "@/components/layout/multi-tap-modal-layout.vue";


// 구성요소를 좀 더 생각해봐야되서 interface는 아직 정의 안함 ㅎㅎ.. any..!
  const multiTapInfo: any = [
    {
      title: "first",
    },
    {
      title: "second",
    },
  ];

/*****   레이아웃   *****/
  <div class="content">
    <template v-for="tap in multiTapInfo">
      <slot v-if="currentMenu === tap.title" :name="tap.title"></slot>
	</template>
</div>




/*****   레이아웃   *****/
    <ul class="menu-list">
      <li
        v-for="(tap, i) in multiTapInfo"
        :key="tap.title + i"
        class="menu-item"
        @click="() => currentMenu = tap.title">
     {{ tap.title }}
   </li>
 </ul>

// 초기 값은 0번째 탭으로 지정
let currentMenu = ref(multiTapInfo[0].title);

간단히 설명해보자면
view에 보여지는 요소는 currentMenu변수와 값을 비교해 v-if로 현재 탭에 알맞은 content를 노출

사실 slot뿐만 아니라 template, teleport컴포넌트들도 vue에서 어떤 원리로 동작하는지 궁금하지만 흘러넘치는 업무와 매일 야근으로 문서들과 만나는건 다음을 기약하기로한다