[Vue.js] Vue3에서 빌트인 컴포넌트 <component> 사용하기

 

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

 

Vue2로 개발할 때는 <component>를 한번도 사용해보지 않아서 차이점은 잘 모르겠지만..

Vue3부터 <component>를 사용하는 방법이 바뀌었다고 한다.

 

 

---

 

📄 HTML

<template>
	...
	<!-- for문 안에서 컴포넌트 이름을 가져와서 선언했다. -->
	<component :is="changeTab(item.type)" :info="item"></component>
	...
</template>

 

 

📄 Script

<script setup>
import { markRaw, ref } from 'vue'
import ChildComp1 from '@/components/ChildComp1.vue'
import ChildComp2 from '@/components/ChildComp2.vue'

const targetComponent = ref(null)
const changeTab = (component: string) => {
  const components: any = {
    ChildComp1,
    ChildComp2,
  }
  return (targetComponent.value = markRaw(components[component]))
}
</setup>

 

 

---

 

 

출처

How to use <component :is=""> in vue 3 script setup

 

 

---

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