A diferencia de Vue 2, en Vue 3 podemos usar más de una directiva v-model. Cada v-model se sincroniza con una
propiedad diferente, simplificando el proceso de comunicación reactiva entre componentes:
<AppForm
v-model:name="name"
v-model:surname="surname"
v-model:profession="profession"
/>
v-model Vue 3 Composition API
La clave para utilizar varios v-model con Vue 3 es especificar un modificador/argumento al escribir la directiva, como
por ejemplo v-model:<argument>. Cada uno de los argumentos de apuntar a una propiedad reactiva que vive en el
componente padre y queremos pasar a un sub-componente.
Desde el componente hijo debemos declarar las propiedades con el helper defineProps:
const props = defineProps({
name: {
type: String,
required: true,
},
surname: {
...
},
profession: {
...
},
})
Y definir los eventos con la nomenclatura update:<prop> y defineEmits:
const emit = defineEmits([
'update:name',
'update:surname',
'update:profession',
]);
Ahora, podemos usar con tranquilidad las nuevas propiedades provenientes de v-model dentro la estructura del
componente:
<template>
<article>
<div>
<label for="name">Name</label>
<input
:value="name"
@input="$emit('update:name', $event.target.value)"
type="text"
id="name"
/>
</div>
...
</article>
</template>
Puedes incluso crear un método local que simplifique el proceso de actualización:
const updateProp = (prop, { target: { value } }) => emit(`update:${prop}`, value);
