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.

GrupoOpções: Estado
TipoOpção
EscopoNo Componente
Versão do Vue3.0+
Suporte a SSRSim

📝 Sintaxe

export default {
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  }
}

⚙️ Argumentos

valueArray 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.
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.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%