Intermediate LevelVue JS
How does the :is prop enable dynamic component rendering and tabbed interfaces?
❓ Interview Prompt: Explain dynamic components (<component :is="...">), switching active views, and HTML element tag strings.
The '<component :is="activeComponent">' element allows dynamically swapping rendered components at runtime based on reactive state.
Acceptable ':is' Values:
1
Imported Component Object: Pass a reactive ref referencing a component definition ('currentTab.value = UserProfile').
2
HTML Tag Name: Pass a string like ':is=""h1""' to dynamically render native HTML tags!
Code Implementation Example
html
<script setup>
import { ref } from 'vue';
import OverviewTab from './OverviewTab.vue';
import SettingsTab from './SettingsTab.vue';
const activeTab = ref(OverviewTab);
</script>
<template>
<button @click="activeTab = OverviewTab">Overview</button>
<button @click="activeTab = SettingsTab">Settings</button>
<!-- Dynamically renders active tab component -->
<component :is="activeTab" />
</template>💡Dynamic component tab switching using <component :is="...">.
🎯 Interview Key Takeaway
Use <component :is="..."> to dynamically render different components or HTML tags based on reactive state.
#Dynamic Components#:is#Intermediate
Back to all Vue JS Questions→