<component> Dynamic Component
Last updated: 2026-10-22
<component> Dynamic Component
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<component :is="currentView"></component>
<!-- native elements too -->
<component is="h3">dynamic tag</component>⚙️ Arguments
| props | is (a component name, definition or native tag string) |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Clicking switches between 'Component A' and 'Component B'.💡 Key Points
💡 Tip Typical uses: tab switching and type-driven form fields.
ℹ️ Note Switching destroys the old component; wrap KeepAlive to preserve state.
⚠️ Warning Unknown names render as native tags with a warning.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from v-if branches?
A Similar outcome with data-driven selection instead of branches.
Q Can props be passed?
A Yes — attributes fall through to the selected component.
Q Can is hold a definition?
A Yes — pass the definition object directly.
