Vue ના <component :is> તમને runtime પર નક્કી કરેલ component રેન્ડર કરવા દেય છે, અને <KeepAlive> આ કમ્પોનેન્ટ્સને cache કરે છે જેથી તેઓ સ્વીચ કર્યા પછી અને પાછા ફર્યા પછી તેમની state સંરક્ષિત રાખે છે.
<component :is> સાથે ડાયનામિક કમ્પોનેન્ટ્સ
<script setup>
import { ref, shallowRef } from "vue";
import TabHome from "./TabHome.vue";
import TabProfile from "./TabProfile.vue";
const tabs = { home: TabHome, profile: TabProfile };
const current = shallowRef(TabHome); // which component to show
</script>
<template>
<button @click="current = tabs.home">Home</button>
<button @click="current = tabs.profile">Profile</button>
<component :is="current" /> <!-- renders whichever component `current` holds -->
</template>
