v-model: aspectos internos del binding bidireccional
v-model se compila como :modelValue + @update:modelValue, nombres personalizados de v-model y v-model en componentes.
v-model: aspectos internos del binding bidireccional es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es realmente v-model
v-model parece un enlace bidireccional mágico, pero solo es una abreviatura para enlazar un valor y escuchar un evento. Comprender en qué se transforma permite utilizarlo tanto en campos de entrada como en componentes personalizados.
v-model en un input de texto
En un input nativo, v-model enlaza el valor y escucha eventos input. Estas dos líneas son equivalentes.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />Dos partes: enlazar y escuchar
:value introduce el estado en el elemento; @input devuelve los cambios del usuario al estado. Juntos producen el efecto bidireccional.
Diferencias de v-model en componentes
En un componente personalizado, v-model usa una prop y un evento diferentes: modelValue y update:modelValue. value/input nativos solo se usan con elementos nativos.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />Implementación de v-model en un componente hijo
Para admitir v-model, un componente hijo declara una prop modelValue y emite update:modelValue cuando el valor debe cambiar.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>La plantilla del componente hijo
El componente hijo vincula la prop recibida al input y emite un evento cuando cambia. El componente padre nunca necesita conocer los detalles internos.
<template>
<input :value="modelValue" @input="onInput" />
</template>Argumentos con nombre de v-model
Puede dirigirse a una prop específica asignando un nombre al modelo: v-model:title usa la prop title y el evento update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />Declaración de un modelo con nombre en el componente hijo
El componente hijo solo tiene que declarar una prop y un evento coincidente con ese nombre.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>Varios v-model en un componente
Como cada modelo tiene su propio nombre, puede vincular varios a la vez. Por ejemplo, un componente de formulario de usuario podría exponer simultáneamente v-model:first y v-model:last.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>Por qué este diseño es potente
Dado que v-model no es más que una combinación de props y eventos, los componentes personalizados se comportan exactamente como inputs nativos para quienes los utilizan. Varios modelos con nombre permiten que un componente gestione de forma ordenada varias vinculaciones bidireccionales.
Error común
No modifique directamente la prop modelValue dentro del componente hijo, ya que eso rompe el flujo unidireccional de las props. Emita siempre el evento de actualización y deje que el componente padre sea el propietario del estado.
Comprobación rápida
Compruebe sus conocimientos sobre el funcionamiento interno de v-model.
Repaso
Ha descubierto cómo funciona v-model:
- En los inputs se expande a
:value+@input. - En los componentes usa
modelValue+update:modelValue. - Los modelos con nombre (
v-model:title) se dirigen a props y eventos específicos. - Puede usar varios v-model en un mismo componente.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «v-model: aspectos internos del binding bidireccional» es gratis?
Sí — el texto completo de «v-model: aspectos internos del binding bidireccional» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «v-model: aspectos internos del binding bidireccional»?
v-model se compila como :modelValue + @update:modelValue, nombres personalizados de v-model y v-model en componentes. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «v-model: aspectos internos del binding bidireccional»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- v-model: aspectos internos del binding bidireccional
- Modificadores de eventos de v-on
- Bindings dinámicos y múltiples con v-bind
- Creación de directivas personalizadas