Предисловие

вместе сvue3.4Выпуск версии,defineModelТакже официально стал штатным сотрудником。Это упрощает двустороннюю связь между родительскими и дочерними компонентами.обязательность,В настоящее время это официально рекомендуемая реализация двусторонней обязательности.

vue3.4Как добиться двунаправленности в прошломобязательность

Каждый должен знатьv-modelПросто синтаксический сахар,Фактически он определен для компонентаmodelValueСвойства и мониторингupdate:modelValueсобытие,Поэтому в прошлом нам приходилось реализовывать двунаправленные данные.обязательность Вам необходимо определить подкомпонентmodelValueсвойство,И для обновления внутри подкомпонентаmodelValueТребуется, когда значениеemitвыйди одинupdate:modelValueсобытие,Передайте новое значение в качестве второго поля.

Давайте рассмотрим простой пример. Код родительского компонента выглядит следующим образом:

<template>
  <CommonInput v-model="inputValue" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const inputValue = ref();
</script>

Код подкомпонента следующий:

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

<script setup lang="ts">
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>

Приведенный выше пример должен быть знаком каждому.,Так это было реализовано раньшеv-modelдвустороннийобязательностьиз。Но есть проблемаinputПоле ввода фактически поддерживает прямое использованиеv-modelиз,Мы не используем его здесьv-modelНо вinputДобавьте над полем вводаvalueсвойствоиinputсобытие。

Причина в том, что изvue2Это уже односторонний поток данных с самого начала,Его нельзя изменить непосредственно в подкомпонентах.propsстоимость в。Вместо этого его следует выбросить из дочернего компонентасобытие,Родительский компонент должен отслеживать это событие.,Затем измените родительский компонент, переданный вpropsизпеременная。Если здесь мы дадимinputДобавьте его прямо в поле вводаv-model="props.modelValue",Затем он фактически модифицируется непосредственно внутри подкомпонента.propsсерединаизmodelValue。Из-за одностороннего потока данныхизпричина,vueПрямая модификация не поддерживается.propsиз,Вот почему нам нужно написать код, как указано выше.

использоватьdefineModelданные о реализациидвустороннийобязательность

defineModelэто макрос,Так что не обязательно начинать сvueсерединаimportимпортировать,прямойиспользовать Вот и все Понятно。Этот макрос можно использовать для объявлениядвустороннийобязательность prop, через родительский компонент v-model использовать.

Базовая демонстрация

Код родительского компонента такой же, как и раньше, а именно:

<template>
  <CommonInput v-model="inputValue" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const inputValue = ref();
</script>

Код подкомпонента следующий:

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

<script setup lang="ts">
const model = defineModel();
model.value = "xxx";
</script>

сверхуизпримерсередина我们прямой将defineModelизвозвращаемое значениеиспользоватьv-modelобязательностьприезжатьinputнад полем ввода,Нет необходимости определять modelValue Свойства и мониторинг update:modelValue событие,Код стал более кратким。defineModelизвозвращаемое значениеэтоref,Мы можем сделать это в подкомпонентесередина Исправлятьmodelпеременнаяизценить,иродительский компонентсерединаизinputValueпеременнаяизценить Он также будет обновляться синхронно,Это обеспечивает двунаправленную обязательность.

Тогда возникает вопрос,отvue2С самого начала это становится односторонним потоком данных.。这里Исправлять子组件изценить后,Также было изменено переменное значение родительского компонента.,Тогда не изменится ли это обратно?vue1издвустороннийпоток данных Понятно?？на самом деле Не такиз,Здесь все еще существует односторонний поток данных.,Далее мы кратко поговорим об этомdefineModelиз Принцип реализации。

Принцип реализации

defineModelФактически, компонент под названиемmodelизrefпеременнаяиmodelValueизprops,иwatchПонятноpropsсерединаизmodelValue。когдаpropsсерединаизmodelValueизценить改变后会同步更新modelпеременнаяизценить。икогда Изменение внутри дочернего компонентаmodelпеременнаяизценить后会抛出update:modelValueсобытие,После того, как родительский компонент получит это событие, он обновит соответствующее переменное значение в родительском компоненте.

Принцип реализации Код выглядит следующим образом：

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

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
const model = ref();

watch(
  () => props.modelValue,
  () => {
    model.value = props.modelValue;
  }
);
watch(model, () => {
  emit("update:modelValue", model.value);
});
</script>

смотреть Понятновышеиз После кода вы должны Понятноразвязатьприезжать Понятно为什么可以在子组件内прямой ИсправлятьdefineModelизвозвращаемое значение后родительский компонентверно应изпеременная Он также будет обновляться синхронно Понятно Бар。我们Исправлятьизна самом деледаdefineModelвозвращатьсяизrefпеременная,вместо того, чтобы изменять его напрямуюpropsсерединаизmodelValue。Метод реализации по-прежнемуиvue3.4ранее реализованныйдвустороннийобязательность Такой жеиз,толькоdefineModelЭтот макрос помогает нам преобразовать предыдущийиз Эти громоздкиеиз Код для инкапсуляцииприезжатьвнутренняя реализация Понятно。

на самом делеdefineModelиз Исходный кодсерединадаиспользовать customRef и watchSyncEffect осознатьиз,我这里да为Понятно Сделать это проще для всехизпрозрачныйdefineModelиз Принцип реализации Кайдзюизrefиwatchизпример。Если все правыdefineModelиз Исходный код感兴趣,Пожалуйста, оставьте сообщение в области комментариев,Если есть еще друзья, которым интересно,Статью опубликую в следующем номереdefineModelИсходный кодизстатья。

defineModelКак определитьtype、defaultждать

теперь этоdefineModelда声明Понятноодинprop,Это также можно определитьpropизtype、default。специфический Код выглядит следующим образом：

const model = defineModel({ type: String, default: "20" });

удалять Понятноподдерживатьtypeиdefault,Также поддерживаетrequiredиvalidator,использованиеиопределениеpropТо же, что и всегда。

defineModelКак реализовать несколько v-model обязательность

Он также поддерживает несколько реализаций родительского компонента. v-model обязательность,В это время мы даемdefineModelпроходитьизпервый参数就不даобъект Понятно,Но веревка.

const model1 = defineModel("count1");
const model2 = defineModel("count2");

在родительский компонентсерединаиспользоватьv-modelчас Код выглядит следующим образом：

<CommonInput v-model:count1="inputValue1" />
<CommonInput v-model:count2="inputValue2" />

Мы также можем использовать несколькоv-modelсерединаопределениеtype、defaultждать

const model1 = defineModel("count1", {
  type: String,
  default: "aaa",
});

defineModelкакиспользоватьвстроенныймодификаторисопределениемодификатор

Если ты хочешьиспользовать系统встроенныйизмодификаторнапримерtrim,Метод записи родительского компонента остается таким же, как и раньше:

<CommonInput v-model.trim="inputValue" />

Нет необходимости вносить какие-либо изменения в подкомпоненты.,ивыше其他изdefineModelпримерда Такой жеиз：

const model = defineModel();

defineModelТакже поддерживаетсопределениемодификатор,например我们要实现один将输入框из Сделать все буквы заглавнымиизuppercaseсопределениемодификатор,同час也需要использоватьвстроенныйизtrimмодификатор。

Код нашего родительского компонента выглядит следующим образом:

<CommonInput v-model.trim.uppercase="inputValue" />

Наш подкомпонент нужно написать так:

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

<script setup lang="ts">
const [modelValue, modelModifiers] = defineModel({
  // getНам это здесь не нужно
  set(value) {
    if (modelModifiers.uppercase) {
      return value?.toUpperCase();
    }
  },
});
</script>

В это время мы даемdefineModelпроходить进去изпервый参数就да包含get и set методизобъект,когдаверноmodelValueпеременная进行读操作час会走приезжатьgetЗайдите внутрь метода,когдаверноmodelValueпеременная进行写操作час会走приезжатьsetЗайдите внутрь метода。Если вам нужно только перехватывать операции записи,Тогда не нужно писатьget。

defineModelизвозвращаемое значение也可以развязать构成двапеременная,первыйпеременная就да我们前面几个примеризrefобъект,раньше давалv-modelобязательность。второйпеременнаяэтообъект,Какие модификаторы включены?,здесь у нас естьtrimиuppercaseдвамодификатор,такmodelModifiersизценить为：

{
  trim: true,
  uppercase: true
}

При вводе в поле ввода,пойдетприезжатьsetвнутри метода,а потом позвониvalue?.toUpperCase()Вот и все实现将输入из Буквы становятся заглавными。

Подвести итог

这篇статья介绍ПонятнокакиспользоватьdefineModelРеализация макросадвустороннийобязательностьа такжеdefineModelиз Принцип реализации。

• Вызывается внутри дочернего компонентаdefineModelМакрос вернетrefобъект,Вы можете напрямую изменить это в подкомпонентеrefобъект Сделать задание,Соответствующая переменная в родительском компоненте также будет изменена одновременно.
• defineModelна самом деле就да在子组件内определение Понятноодинrefпеременнаяиверно应изprop,Затем соответствующий реквизит отслеживается, и значение refпеременная всегда совпадает со значением соответствующего реквизита. При изменении значения refпеременная в дочернем компоненте событие будет передано в родительский компонент.,Пусть родительский компонент обновит соответствующее переменное значение.,Таким образом достигается двусторонняя обязательность.
• использоватьdefineModel({ type: String, default: "20" })Вот и всеопределениеpropизtypeиdefaultждать Параметры。
• использоватьdefineModel("count")Вы можете достичь несколькихv-modelобязательность。
• через деконструкцию defineModel() извозвращаемое значение拿приезжатьmodelModifiersмодификаторобъект,Сотрудничать get и set Параметры конвертера реализуют пользовательские модификаторы.