v-model: elementos internos da vinculação bidirecional
v-model é compilado para :modelValue + @update:modelValue, nomes personalizados de v-model e v-model em componentes.
v-model: elementos internos da vinculação bidirecional é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que v-model realmente é
v-model parece uma vinculação bidirecional mágica, mas é apenas uma abreviação para uma vinculação de valor acompanhada de um ouvinte de eventos. Entender no que ele se expande permite usá-lo tanto em entradas quanto em componentes personalizados.
v-model em uma entrada de texto
Em uma entrada nativa, v-model vincula o valor e escuta eventos de entrada. Estas duas linhas são equivalentes.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />Duas partes: vincular e escutar
:value envia o estado para o elemento; @input envia as alterações do usuário de volta para o estado. Juntas, essas partes criam o efeito bidirecional.
v-model em componentes é diferente
Em um componente personalizado, v-model usa uma propriedade e um evento diferentes: modelValue e update:modelValue. value/input nativos são usados apenas para elementos nativos.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />Implementando v-model em um filho
Para oferecer suporte a v-model, um filho declara uma propriedade modelValue e emite update:modelValue quando o valor deve mudar.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>O modelo do filho
O filho associa a propriedade recebida ao campo de entrada e emite um evento quando há uma alteração. O pai nunca precisa conhecer os detalhes internos.
<template>
<input :value="modelValue" @input="onInput" />
</template>Argumentos nomeados de v-model
Você pode direcionar uma propriedade específica nomeando o modelo: v-model:title usa a propriedade title e o evento update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />Declarando um modelo nomeado no filho
O filho simplesmente declara uma propriedade e um evento correspondente com esse nome.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>Vários v-model em um componente
Como cada modelo tem seu próprio nome, você pode associar vários modelos ao mesmo tempo. Um componente de formulário de usuário pode disponibilizar v-model:first e v-model:last simultaneamente.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>Por que este design é poderoso
Como v-model é apenas uma combinação de propriedades e eventos, os componentes personalizados parecem exatamente campos de entrada nativos para quem os utiliza. Vários modelos nomeados permitem que um componente gerencie diversas associações bidirecionais de forma organizada.
Armadilha comum
Não altere diretamente a propriedade modelValue dentro do filho — isso quebra o fluxo unidirecional das propriedades. Sempre emita o evento de atualização e deixe o pai ser o responsável pelo estado.
Verificação rápida
Teste seus conhecimentos sobre o funcionamento interno de v-model.
Recapitulação
Você descobriu como v-model funciona:
- Em campos de entrada, ele se expande para
:value+@input. - Em componentes, ele usa
modelValue+update:modelValue. - Modelos nomeados (
v-model:title) direcionam propriedades e eventos específicos. - Você pode usar vários v-models em um único componente.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “v-model: elementos internos da vinculação bidirecional” é grátis?
Sim — o texto completo de “v-model: elementos internos da vinculação bidirecional” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “v-model: elementos internos da vinculação bidirecional”?
v-model é compilado para :modelValue + @update:modelValue, nomes personalizados de v-model e v-model em componentes. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “v-model: elementos internos da vinculação bidirecional”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- v-model: elementos internos da vinculação bidirecional
- Modificadores de eventos v-on
- Vinculações dinâmicas e múltiplas com v-bind
- Como escrever diretivas personalizadas