Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Особенность работы v-model в Vue3 с обычными HTML-элементами и компонентами библиотеки ant-design-vue

Особенность работы v-model в Vue3 с обычными HTML-элементами и компонентами библиотеки ant-design-vue

v-model — это директива в Vue.js, которая обеспечивает двустороннюю привязку данных между моделью и элементами пользовательского интерфейса. Это значит, что любые изменения в пользовательском интерфейсе автоматически обновляют значения в модели данных и наоборот.

Как работает v-model с обычными HTML-элементами

Когда вы используете обычный HTML-элемент, такой как <input>, с v-model в Vue, оно автоматически связывает значение текстового поля с переменной searchTerm.

Двусторонняя связь

v-model обеспечивает двустороннюю привязку. Это значит, что изменения в поле ввода обновляют searchTerm и наоборот.

Как это реализовано

  • Пропс value: Vue использует пропс value для получения текущего значения.
  • Событие input: Vue перехватывает событие input и обновляет searchTerm с новым значением.

Пример работы

<template>
  <div>
    <input
      v-model="searchTerm"
      placeholder="Введите текст для поиска"
    />
    <p>Вы ввели: {{ searchTerm }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const searchTerm = ref('');
</script>

В этом примере, при вводе текста в поле ввода, значение searchTerm автоматически обновляется.

Почему с компонентами ant-design-vue всё иначе?

При использовании компонентов из библиотек, таких как <a-input>, требуется немного другой синтаксис.

<a-input
  v-model:value="searchTerm"
  placeholder="Введите текст для поиска"
/>

Использование custom prop

Компоненты ant-design-vue используют modelValue как пропс для получения значения.

Событие обновления

Вместо события input используется update:modelValue для обновления значения.

Явность

Синтаксис v-model:value добавляет уровень явности, что полезно в сложных компонентах.

Что такое modelValue?

modelValue — это название пропса, который используется в компонентах для получения значения, связанного с v-model. Это значение, которое компоненты должны использовать для передачи данных.

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

<a-input v-model:value="email" placeholder="Введите вашу электронную почту" />

В этом примере v-model:value говорит Vue: "Я хочу, чтобы этот компонент использовал пропс modelValue для передачи данных".

Значение переменной email будет связано с содержимым поля ввода (a-input), и любые изменения в этом поле автоматически обновят значение email.

В самом компоненте, куда передаются данные, обновление и передача данных обратно (родителю) осуществляются с помощью $emit:


<template>
  <input
    :value="modelValue"  <!-- Здесь modelValue будет получать значение из v-model:value -->
    @input="$emit('update:modelValue', $event.target.value)" <!-- Изменения отправляются родителю -->
  />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// Определяем пропсы
const props = defineProps({
  modelValue: String, <!-- Здесь мы объявляем пропс modelValue -->
});

// Определяем события
const emit = defineEmits(['update:modelValue']);
</script>

Когда использовать v-model, а когда v-model:value?

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

<input v-model="text" />

Здесь Vue автоматически связывает текстовое поле (input) с переменной text.

Однако, когда вы работаете с компонентами библиотеки, такими как ant-design-vue, вам может потребоваться использовать другое имя пропса для передачи данных. В большинстве случаев это будет modelValue:

<a-input v-model:value="searchTerm" placeholder="Введите текст для поиска" />

Здесь v-model:value указывает, что нужно использовать пропс modelValue для связывания с переменной searchTerm.

Пример использования

Рассмотрим пример, как использовать оба варианта:

Простой input с v-model:


<template>
  <input v-model="name" placeholder="Введите ваше имя" />
  <p>Ваше имя: {{ name }}</p>
</template>

<script setup>
import { ref } from 'vue';
const name = ref(''); // Создаем реактивную переменную
</script>

Компонент a-input с v-model:value:


<template>
  <a-input
    v-model:value="email"
    placeholder="Введите вашу электронную почту"
  />
  <p>Ваша почта: {{ email }}</p>
</template>

<script setup>
import { ref } from 'vue';
const email = ref(''); // Создаем реактивную переменную
</script>

Понимание, когда использовать v-model или v-model:value, помогает правильно настраивать привязку данных и использовать компоненты библиотек эффективно.

Использование v-model с обычными HTML-элементами просто и интуитивно. С компонентами из библиотек требуется более явное указание, что ведет к необходимости использовать v-model:value.

автор - Михаленко Р.
M R. Автор - kaktotak.by Специализация: финансово-экономическое проектирование - моделирование бизнеса, инвестиционных проектов реального сектора, анализ и оценка эффективности, оптимизация системы управленческих решений.

Широкий спектр web-компетенций для решения задач бизнеса.

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +
Повышайте своё качество вместе со мной - что, как и почему в экономике на простом. Микро- и макро аспекты.

А так же - Справочник WEB-разработчика | php+js+seo
Заметки и нативные решения простых локальных задач на PHP, JS. Кое-что про Laravel, WordPress, Vue и SEO.

  Персональная помощь в экономическом проектировании и веб-разработке:

  • Финансово-экономическое моделирование, анализ, учёт, бизнес-планирование
  • Комплексная web-разработка/поддержка проекта в сети (php/js, seo – Laravel, WordPress, Vue, telegram, администрирование, контент, реклама в Яндекс Директ

  telegram или форма обратной связи

Administrator
146
0
Имя
E-mail
Рейтинг
Отзыв

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы