Как повторно использовать логику в Vue.js с составными компонентами
Composable. Компонуемые компоненты — это простое обновление, которое вы должны сразу же использовать с приложениями, созданными с помощью Vue 3. Ниже приведены подробные инструкции.
При программировании важно создать структуру кодовой базы для повторного использования кода, когда это возможно. Дублирование может привести к раздуванию кодовой базы и усложнению отладки, особенно в крупных приложениях.
Vue упрощает повторное использование кода в составных компонентах. Компонуемые объекты — это функции, инкапсулирующие логику, и вы можете повторно использовать их в разных проектах для реализации схожих функций.
До того, как во Vue 3 появилась возможность компоновки, вы могли использовать примеси для сбора кода и повторного использования его в разных частях приложения. Миксины содержат параметры Vue.js, такие как данные, методы и перехватчики цикла продукта, что позволяет повторно использовать код в нескольких компонентах.
Чтобы создать миксины, вы создаете структуру для каждого отдельного файла, затем включаете их и компоненты, добавляя комбинацию к свойству миксинов в объекте выбора этого компонента. Например:
// formValidation.js экспортирует const formValidationMixin = { data() { return { formData: { имя пользователя: ”, пароль: ”, }, formErrors: { имя пользователя: ”, пароль: ”, }, }; }, методы: { validateForm() { this.formErrors = {}; if (!this.formData.username.trim()) { this.formErrors.username=”Требуется имя пользователя.”; } if (!this.formData.password.trim()) { this.formErrors.password = ‘Требуется пароль.’; } return Object.keys(this.formErrors).length === 0; }, }, };
Этот код показывает содержимое миксина для проверки формы. Эта комбинация содержит два свойства данных — fromData и formErrors, для которых изначально установлены пустые значения.
formData содержит входные данные для этой формы, включая поля имени пользователя и пароля, инициализированные как пустые. formErrors представляет эту структуру, содержащую потенциальное сообщение об ошибке, которое также изначально пусто.
Миксин также содержит метод validateForm(), который проверяет, пусты ли имя пользователя и пароль. Если какое-либо поле пусто, оно заполняет атрибут данных formErrors соответствующим сообщением об ошибке.
Этот метод возвращает true для допустимой формы, когда formErrors пуст. Вы можете использовать миксин, импортировав его в компонент Vue и добавив в свойство mixin объекта Options:
Имя пользователя: {{ formErrors.username }} Пароль: {{ formErrors.password }} Отправить
В этом примере показан компонент Vue, написанный с использованием метода объекта Options. Свойство mixins включает в себя все импортированные вами миксины. В этом случае компонент использует метод validateForm из миксина formValidation, чтобы уведомить пользователя о том, была ли отправка формы успешной.
Как использовать ингредиенты, которые можно комбинировать
Составной компонент — это отдельный файл JavaScript с функциями, адаптированными к конкретным задачам или требованиям. Вы можете использовать API композитинга Vue в составном компоненте, используя такие функции, как ссылки и вычисляемые ссылки.
Доступ к API компонента позволяет создавать функции, интегрируемые в различные компоненты. Эти функции возвращают объект, который вы можете немедленно импортировать и скомпоновать в компоненты Vue с помощью функции настройки Composition API.
Создайте новый файл JavaScript в папке src, чтобы использовать составной компонент. Для более крупных проектов рассмотрите возможность организации папки в src и создания отдельных файлов JavaScript для различных компонуемых компонентов, обязательно называя их четко для их предполагаемого использования.
Внутри файла JavaScript определите нужную вам функцию. Вот рефакторинг миксина formValidation как комбинированного компонента:
// formValidation.js import { reactive } from ‘vue’; функция экспорта useFormValidation() { const state = reactive({ formData: { имя пользователя: ”, пароль: ”, }, formErrors: { имя пользователя: ”, пароль: ”, }, }); функция validateForm() {state.formErrors = {}; if (!state.formData.username.trim()) { state.formErrors.username=”Требуется имя пользователя.”; } if (!state.formData.password.trim()) {state.formErrors.password = ‘Требуется пароль.’; } return Object.keys(state.formErrors).length === 0; } Возврат {состояние, validateForm,}; }
Этот фрагмент начинается с импорта функции реагирования из пакета vue. Затем он создает экспортируемую функцию useFormValidation() .
Он работает постоянно, создавая переменную ответа state, содержащую свойства formData и formErrors. Затем этот фрагмент обрабатывает проверку формы, используя метод, очень похожий на миксин. Наконец, он возвращает переменную состояния и функцию validateForm как объект.
Вы можете использовать составные компоненты, импортировав функцию JavaScript из файла в вашем компоненте:
Имя пользователя: {{state.formErrors.username }} Пароль: {{state.formErrors.password }} Отправить
После импорта составного компонента useFormValidation код деконструирует возвращаемый объект JavaScript и продолжает проверку формы. Он сообщает, была ли форма отправлена успешно или произошла ошибка.
Хотя примеси были полезны во Vue 2 для повторного использования кода, в Vue 3 их место заняли составные компоненты. Компонуемые компоненты предоставляют более структурированный и удобный в сопровождении метод повторного использования логики. в приложениях Vue.js, что упрощает создание масштабируемых веб-приложений с помощью Vue.
Надеюсь, эта статья будет вам полезна!
В статье выше вы познакомились с «Как повторно использовать логику в Vue.js с составными компонентами». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
