<component> Componente Dinâmico
Última atualização: 2026-10-22
<component> Componente Dinâmico
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<component :is="currentView"></component>
<!-- também funciona com tags nativas -->
<component is="h3">tag dinâmica</component>⚙️ Argumentos
| props | is (nome do componente, objeto de definição ou string de tag nativa) |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Clicking switches between 'Component A' and 'Component B'.💡 Pontos-chave
💡 Dica Formas comuns: alternância de abas, renderização de campos de formulário conforme o tipo.
ℹ️ Nota Trocar destrói o componente antigo (o estado se perde); envolva com para preservar o estado.
⚠️ Aviso Se o valor de is apontar para um componente não registrado, o Vue renderiza como tag nativa e pode emitir um aviso.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença das branches com v-if?
R O resultado é parecido, mas o componente dinâmico é guiado por dados, sem escrever um branch para cada caso.
P Dá para passar props?
R Sim: <component :is="view" :data="payload">; os atributos são passados para o componente selecionado.
P O is aceita uma definição direta?
R Sim: :is="MyComponent" passa o objeto de definição do componente, ideal para cenários totalmente dinâmicos.
