Componente v-model ​

A partir de Vue 3.4, el enfoque recomendado para lograr esto es usando la macro defineModel():

<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>El v-model del padre es: {{ model }}</div>
  <button @click="update">Incrementar</button>
</template>

El padre puede entonces enlazar un valor con v-model:

<Child v-model="countModel" />

El valor devuelto por defineModel() es una ref. Se puede acceder y mutar como cualquier otra ref, excepto que actúa como un enlace bidireccional entre un valor padre y uno local:

• Su .value se sincroniza con el valor enlazado por el v-model del padre;
• Cuando es mutado por el hijo, también provoca que el valor enlazado por el padre se actualice.

Esto significa que también puedes enlazar esta ref a un elemento de entrada nativo con v-model, lo que facilita envolver elementos de entrada nativos mientras proporcionas el mismo uso de v-model:

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

Pruébalo en el parque de pruebas

Internamente ​

defineModel es una macro de conveniencia. El compilador la expande a lo siguiente:

• Una prop llamada modelValue, con la que se sincroniza el valor de la ref local;
• Un evento llamado update:modelValue, que se emite cuando el valor de la ref local es mutado.

Así es como implementarías el mismo componente hijo mostrado anteriormente antes de la versión 3.4:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

Entonces, v-model="foo" en el componente padre se compilará a:

<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

Como puedes ver, es un poco más verboso. Sin embargo, es útil entender lo que sucede internamente.

Dado que defineModel declara una prop, puedes declarar las opciones de la prop subyacente pasándolas a defineModel:

// haciendo que el v-model sea requerido
const model = defineModel({ required: true })

// proporcionando un valor por defecto
const model = defineModel({ default: 0 })

<script setup>
const model = defineModel({ default: 1 })
</script>

<script setup>
const myRef = ref()
</script>

<template>
  <Child v-model="myRef"></Child>
</template>

En el componente hijo, podemos soportar el argumento correspondiente pasando una cadena a defineModel() como su primer argumento:

<script setup>
const title = defineModel('title')
</script>

<template>
  <input type="text" v-model="title" />
</template>

Pruébalo en el Playground

Si también se necesitan opciones de prop, deben pasarse después del nombre del model:

const title = defineModel('title', { required: true })

<script setup>
defineProps({
  title: {
    required: true
  }
})
defineEmits(['update:title'])
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

Pruébalo en el Playground

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

Los modificadores añadidos a un v-model de componente se pueden acceder en el componente hijo desestructurando el valor de retorno de defineModel() de esta manera:

<script setup>
const [model, modifiers] = defineModel()

console.log(modifiers) // { capitalize: true }
</script>

<template>
  <input type="text" v-model="model" />
</template>

Para ajustar condicionalmente cómo se debe leer/escribir el valor basándose en los modificadores, podemos pasar las opciones get y set a defineModel(). Estas dos opciones reciben el valor al obtener/establecer la ref del modelo y deben devolver un valor transformado. Así es como podemos usar la opción set para implementar el modificador capitalize:

<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>

Pruébalo en el Playground

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<template>
  <input type="text" :value="props.modelValue" @input="emitValue" />
</template>