Использование v-модели для пользовательских компонентов в Vue 3

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

Таким образом, вы можете связать переменную с HTML-элементом, который находится внутри дочернего компонента.
В последней версии Vue, т.е. Vue 3, мы должны следовать другим правилам, чем в Vue 2.

В этой статье я покажу вам, как можно очень просто и наилучшим образом добавить v-модель в пользовательские компоненты в Vue 3.

Если вы используете Vue 2, вы можете прочесть нашу другую статью о том, как добавить v-модель в пользовательские компоненты в Vue 2.

В Vue 2 у нас был только один способ создания компонента. Но в Vue 3 мы можем создать компонент тремя различными способами.

  • API опций (это старый способ, который был доступен в Vue 2).
  • API композиции.
  • SFC (Однофайловые компоненты) Настройка сценария.

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

Предварительные условия

Прежде чем приступить к этой статье, необходимо выполнить несколько основных требований. К ним относятся:

  • Базовые знания о Vue 3.
  • Вы должны знать об элементах форм HTML.
  • Вы должны знать о директивах Vue 3 и о том, как их использовать.## Что такое двусторонняя привязка данных? Двусторонняя привязка данных — это способ связать элемент HTML-формы и переменную таким образом, что если значение в одном месте изменяется, то это отражается и в другом месте. Например, если значение в элементе формы изменяется, то значение, хранящееся в переменной, также автоматически изменится в то же время.

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

Этот процесс очень полезен, если нам нужно показать изменения в реальном времени нашим пользователям. В Vue директива v-model использует эту технику по умолчанию.

Как работает v-model в Vue 3?

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

Но чтобы внедрить v-model в пользовательские компоненты, необходимо знать, как эта директива работает в фоновом режиме.

Когда мы добавляем v-model в поле ввода, Vue автоматически добавляет к этому вводу две вещи за сценой.

  • Vue связывает атрибут value этого поля ввода с переменной, которую мы указываем в v-model.
  • Vue добавляет событие JavaScript input к этому полю ввода, так что каждый раз, когда пользователи пишут или удаляют что-то в поле ввода, это событие срабатывает. Это именно то, что вам нужно сделать, если вы хотите использовать v-model в пользовательских компонентах в Vue 3.

Как добавить v-model в пользовательские компоненты

Чтобы добавить поддержку v-model в компонент, нужно сделать две вещи, которые директива v-model делает с полем ввода за сценой.

  • Вы должны связать атрибут value в этом поле ввода с реквизитом modelValue. Вы должны назвать это свойство modelValue, оно чувствительно к регистру.
  • Вы должны прослушивать событие ввода и испускать пользовательское событие каждый раз, когда это событие срабатывает. Вы должны назвать пользовательское событие update:modelValue, оно также чувствительно к регистру.Примечание: Я покажу вам, как можно использовать разные имена для реквизита и пользовательского события в последующей части этой статьи. Вы можете использовать любой элемент HTML-формы, такой как input, select, textarea и т.д.

Добавление v-модели к пользовательским компонентам в Vue 3 Options API

В этом разделе я покажу вам, как можно применить v-модель к пользовательскому компоненту с помощью API опций.

Сначала необходимо создать компонент в проекте Vue 3. Я создал компонент с именем BaseInput.vue, вы можете дать ему любое имя по своему усмотрению.

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Options API</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

<script>
export default {
    props: {
        modelValue: ''
    },
    methods: {
        updateValue(event) {
            this.$emit('update:modelValue', event.target.value);
        }
    }
}
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

В этом компоненте у меня есть поле ввода HTML, в котором я хочу создать двустороннюю привязку данных.

Здесь мне нужно связать атрибут value в поле ввода с реквизитом modelValue и выдать событие udpate:modelValue.
Каждый раз, когда событие input срабатывает, выполняется метод updateValue. Vue автоматически передает объект события этому методу. И этот метод испускает пользовательское событие со значением, которое пользователь ввел в поле ввода.

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

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Я использовал компонент BaseInput.vue внутри компонента App.vue. Здесь App является родительским компонентом, который имеет переменную под названием «content».

Каждый раз, когда кто-то вводит что-то в поле ввода, эта переменная будет сохранять это значение. Аналогично, если вы установите значение по умолчанию для этой переменной, это значение будет отображаться в поле ввода.

Вот как вы можете добавить v-модель в пользовательские компоненты в Vue 3 с помощью API опций.
Добавление v-модели к пользовательским компонентам в Vue 3 с помощью API композиции
Если вы используете Vue 3 Composition API в своем компоненте, вы можете следовать этому методу, чтобы добавить поддержку v-model в пользовательский компонент.

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Composition API</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

<script>
export default {
    props: {
        modelValue: ''
    },

    setup(props, context) {
        const updateValue = (event) => {
            context.emit('update:modelValue', event.target.value);
        }

        return { updateValue }
    }
}
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

В API композиции мы должны использовать то же имя реквизита и испускать то же событие, что и в API опций.

Вы просто должны следовать синтаксису API композиции в своем компоненте.

В этом компоненте я использовал функцию setup(), которая требуется для composition API.

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь вы можете использовать компонент BaseInput в любых других компонентах и применить к нему директиву v-model.

Добавление v-model к пользовательским компонентам в Vue 3 Настройка сценария SFC

SFC (Single File Components) — это еще один синтаксис, представленный в последней версии Vue 3. Используя этот синтаксис, вы можете писать чистый и читабельный код внутри вашего компонента.

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>SFC Script Setup</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

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

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

const updateValue = (event) => {
    emit('update:modelValue', event.target.value)
}
</script>
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот синтаксис является частью API композиции. Но разница заключается в том, как мы его пишем.

В ранней версии Composition API мы должны были использовать функцию setup(). Но в новом синтаксисе вы используете слово setup в теге сценария.
В случае с Props и Emits мы должны использовать defineProps() и defineEmits(), которые предоставляются Vue. Вам даже не нужно импортировать их из Vue.

Вы можете видеть, что это занимает меньше кода и выглядит намного проще, чем два других стиля.

В остальном все аналогично. Теперь вы можете импортировать и использовать этот компонент в другом компоненте с помощью директивы v-model.

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Настройка v-model имен реквизитов и событий по умолчанию в компонентах

До сих пор мы использовали одно и то же имя реквизита modelValue и одно и то же имя события update:modelValue. Но что если вы хотите использовать другие имена.

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

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Custom name for Prop and Event</h2>
        <input type="text" :value="title" @input="updateTitle" />
    </div>
</template>

<script setup>
const props = defineProps({
    title: String
})

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

const updateTitle = (event) => {
    emit('update:title', event.target.value)
}
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше примере я использовал title в качестве имени реквизита, которое добавляется к атрибуту :value=»».

Теперь вы можете вызывать событие update:title всякий раз, когда пользователь вводит что-то в поле ввода. Я использую update:title, потому что мое имя реквизита — title. Если вы используете другое имя, вам просто нужно добавить это имя с префиксом update:.

<!-- App.vue component -->

<template>
    <base-input v-model:title="postTitle"></base-input>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Когда вы применяете v-model к этому компоненту, вы должны упомянуть имя реквизита, которое вы использовали в компоненте BaseInput.vue.

Несколько v-model в пользовательском компоненте в Vue 3

В Vue 2 нам разрешалось использовать v-model только один раз в компоненте.

Но в Vue 3 мы можем одновременно подключать несколько v-моделей к компоненту. Вот как можно использовать несколько v-моделей в пользовательских компонентах.

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Title</h2>
        <input type="text" :value="title" @input="updateTitle" />
        <h2>Content</h2>
        <input type="text" :value="modelValue" @input="updateContent" />
    </div>
</template>

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

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

const updateTitle = (event) => {
    emit('update:title', event.target.value)
}

const updateContent = (event) => {
    emit('update:modelValue', event.target.value)
}
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше примере я использовал пользовательское имя prop и пользовательское имя события для одной директивы v-model.
Для другой директивы я использую имена по умолчанию. Но вы можете задать пользовательские имена для обеих директив, если хотите.

Все, что вам нужно помнить, это то, что в имени события вы добавите имя реквизита с префиксом update:.

<!-- App.vue component -->

<template>
    <base-input v-model="content" v-model:title="postTitle"></base-input>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Когда вы используете компонент BaseInput.vue, вы должны упомянуть две директивы v-model одновременно.

В этом случае вы присоедините пользовательское имя реквизита к одной v-модели. Для имени по умолчанию вам не нужно ничего добавлять.

Заключение

Я показал вам лучшие способы применения директивы v-model в компонентах Vue 3. Вы научились делать это с помощью API опций, API композиции и настройки сценария SFC.

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

Оцените статью
devanswers.ru
Добавить комментарий