v-model может использоваться в компоненте для реализации двусторонней привязки

Сначала давайте вернемся к тому, как v-model используется нативный элемент

Под капотом компилятор шаблонов расширяется v-model до более подробного для нас эквивалента. Таким образом, приведенный выше код делает то же самое, что и следующий

При использовании в компоненте v-model вместо этого расширяется до этого

Вот это в действии

Теперь v-model должно отлично работать с этим компонентом

Другой способ реализации v-model в этом компоненте — использовать записываемое computed свойство как с геттером, так и с сеттером. Метод get должен возвращать modelValue свойство и setгенерировать соответствующее событие

v-model на компоненте также может принимать аргумент

В этом случае вместо modelValue реквизита и update:modelValue события по умолчанию дочерний компонент должен ожидать реквизита title и генерировать update:title событие для обновления родительского значения

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

Каждый из них v-model будет синхронизироваться с разными реквизитами без необходимости использования дополнительных опций в компоненте

Когда мы изучали привязки ввода формы, мы увидели, что у нее v-model есть встроенные модификаторы — .trim .number и .lazy В некоторых случаях вам также может потребоваться, чтобы v-model ваш пользовательский компонент ввода поддерживал пользовательские модификаторы

Давайте создадим пример пользовательского модификатора, capitalize который будет писать заглавную первую букву строки, предоставленной привязкой v-model

Модификаторы, добавленные к компоненту, v-model будут переданы компоненту через modelModifiers свойство. В приведенном ниже примере мы создали компонент, который содержит modelModifiers свойство, которое по умолчанию равно пустому объекту

Обратите внимание, что свойство компонента modelModifiers содержит capitalizeи его значение равно true - поскольку оно установлено в v-model привязке v-model.capitalize="myText"

Теперь, когда мы настроили нашу опору, мы можем проверить modelModifiers ключи объекта и написать обработчик для изменения выдаваемого значения. В приведенном ниже коде мы будем использовать строку с заглавной буквы всякий раз, когда элемент input запускает input событие

Для v-model привязок с аргументами и модификаторами сгенерированное имя свойства будет arg + "Modifiers"

Соответствующие декларации должны быть

Вот еще один пример использования модификаторов Multiple v-model с разными аргументами

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

Затем родитель может связать значение с помощью v-model

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

Вот как вы могли бы реализовать тот же дочерний компонент, показанный выше до версии 3.4

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

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

v-model на компоненте также может принимать аргумент

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

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

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

Каждый из них v-model будет синхронизироваться с разными реквизитами без необходимости использования дополнительных опций в компоненте

Когда мы изучали привязки ввода формы, мы увидели, что у нее v-model есть встроенные модификаторы — .trim .numberи .lazy В некоторых случаях вам также может потребоваться, чтобы v-model ваш пользовательский компонент ввода поддерживал пользовательские модификаторы.

Давайте создадим пример пользовательского модификатора, capitalize который будет писать заглавную первую букву строки, предоставленной привязкой v-model

Доступ к модификаторам, добавленным к компоненту, v-model можно получить в дочернем компоненте, деструктурировав defineModel() возвращаемое значение следующим образом

Чтобы условно настроить способ чтения/записи значения на основе модификаторов, мы можем передать параметры get Эти два параметра получают значение при получении/установке ссылки на модель и должны возвращать преобразованное значение. Вот как мы можем использовать опцию для реализации модификатора :setdefineModel() set capitalize

Вот еще один пример использования модификаторов Multiple v-model с разными аргументами