props Receber dados do pai
Última atualização: 2026-10-22
props Receber dados do pai
props declara os atributos que um componente aceita, com forma abreviada em array ou sintaxe de objeto para tipo, obrigatoriedade e padrões.
| Grupo | Opções: Estado |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
props: {
title: { type: String, required: true },
count: { type: Number, default: 0 }
}
}
⚙️ Argumentos
| value | Array ou objeto; a forma de objeto adiciona type, required, default e validator |
|---|
Retorno:Os valores passados pelo pai; somente leitura (fluxo de dados unidirecional)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída:
Shows 'Greeting (3 items)'.
💡 Pontos-chave
⚠️ Aviso Fluxo unidirecional: nunca mute um prop — emita um evento para o pai atualizá-lo.
💡 Dica Padrões de objeto e array precisam de factories: default: () => [].
ℹ️ Nota Atributos em kebab-case mapeiam para props em camelCase.
🏷️ Estado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O que acontece se o filho mutar um prop?
R Dá um aviso em desenvolvimento e é sobrescrito quando o pai re-renderiza — emita um evento em vez disso.
P Por que padrões de objeto geram aviso?
R As instâncias compartilhariam um único objeto; factories dão a cada uma uma cópia nova.
P Posso observar props?
R Sim — observe o prop pelo nome, ou derive com computed.