Директива v-model ​

Начиная с Vue 3.4, для достижения этой цели рекомендуется использовать макрос defineModel():

<script setup>
const model = defineModel()

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

<template>
  <div>v-model, связанная с родительским компонентом: {{ model }}</div>
  <button @click="update">Увеличить</button>
</template>

Родитель может связать значение с v-model:

<Child v-model="countModel" />

Значение, возвращаемое функцией defineModel(), является ссылкой. К нему можно обращаться и изменять, как к любому другому ref, за исключением того, что он действует как двусторонняя привязка между родительским значением и локальным:

• Его .value синхронизируется со значением, связанным с родительской v-model;
• Когда оно изменяется дочерним элементом, это приводит к обновлению родительского связанного значения.

Это означает, что вы также можете привязать эту ссылку к нативному элементу ввода с помощью v-model, что позволяет легко обернуть нативные элементы ввода, обеспечивая при этом использование v-model:

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

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

Попробовать в Песочнице

Под капотом ​

defineModel — это удобный макрос. Компилятор расширит его до следующего вида:

• Свойство с именем modelValue, с которым синхронизируется значение локальной ссылки;
• Событие с именем update:modelValue, которое испускается при изменении значения локальной ссылки.

Вот как можно реализовать тот же дочерний компонент, показанный выше, до версии 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>

Тогда v-model="foo" в родительском компоненте будет скомпилировано в:

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

Как видите, он более многословен. Однако полезно понимать, что происходит под капотом.

Поскольку defineModel объявляет prop, вы можете объявить опции базового prop, передав его в defineModel:

// делаем v-model обязательным
const model = defineModel({ required: true })

// предоставляем значение по умолчанию
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>

В дочернем компоненте мы можем поддержать соответствующий аргумент, передав строку в defineModel() в качестве его первого аргумента:

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

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

Попробовать в Песочнице

Если также необходимы параметры пропсов, их следует передать после имени модели:

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>

Попробовать в Песочнице

<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>

Модификаторы, добавленные в компонент v-model, могут быть доступны в дочернем компоненте путём деструктуризации возвращаемого значения defineModel() следующим образом:

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

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

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

Чтобы условно настроить чтение/запись значения на основе модификаторов, мы можем передать get и set опции в defineModel(). Эти две опции получают значение при get/set модели ref и должны возвращать преобразованное значение. Вот как мы можем использовать опцию set для реализации модификатора 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>

Попробовать в Песочнице

<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>