devterview_$ iniciar simulação

Fluxo de dados: props pra baixo, eventos pra cima

FácilJúniorComponentes

Pergunta

Por que mutar uma prop diretamente no componente filho é um antipadrão no Vue, e qual é o fluxo correto?

Resposta esperada

Props são de mão única: o pai é o dono do dado, o filho recebe pra ler. Mutar a prop no filho (`props.valor = x` ou `props.obj.campo = x`) quebra o fluxo — o pai não sabe da mudança, e no próximo re-render do pai a prop é sobrescrita, então o estado 'pisca' ou diverge; o Vue inclusive avisa no console. O fluxo correto: o filho EMITE um evento (`emit('update:valor', novo)`) e o pai atualiza seu próprio estado, que reflui como prop. Pra inputs, o açúcar `v-model` no pai + `defineModel()` (ou `modelValue` prop + `update:modelValue` emit) no filho formaliza esse ciclo. Se o filho precisa de uma cópia local editável, ele cria seu próprio `ref` inicializado a partir da prop e emite quando 'confirma'.

Por que perguntam isso

Pergunta júnior/pleno de Vue. Conecta com estado derivado do React. Sinal bom: `defineModel()` / `update:modelValue`.

#props#emit#v-model#one-way-data-flow
publicidade

Perguntas de acompanhamento

Relacionadas