El nuevo v-model en Vue 3

En Vue 3 tenemos una gran novedad para poder hacer data-binding. Si no sabes qué es data-binding, es muy sencillo: es la posibilidad de que cuando un input cambie desde nuestro formulario p.ej también lo haga en nuestro componente.

En  Vue 2 para hacer data-binding utilizamos v-model, y esto también es así en Vue 3, es decir, lo siguiente funcionará en ambos casos:

La novedad en Vue 3 es la posibilidad de atacar una prop de un componente a través de v-model para que cuando su valor cambie podamos capturarlo desde el componente que lo utiliza. v-model en Vue 3 Para que lo entiedas perfectamente vamos a crear un componente que representará un formulario de inicio de sesión con Vue 3.

Hasta aquí todo bien, simplemente tenemos un formulario para iniciar sesión con 3 campos. Ahora bien, algo que sí puede llamar la atención es ver cómo en los eventos change o input estamos emitiendo eventos, eventos que comienzan por update: seguido del nombre del modelo de datos... ¿y para qué? Para lo siguiente:

Cada vez que cualquier dato cambie en nuestro componente LoginForm nosotros tendremos ese dato actualizado en el componente que lo utilice gracias a la posibilidad de utilizar múltiples directivas v-model en Vue 3, una para cada prop.