Vue компоненты

Просмотров 930
Сложность:

Обычные Vue компоненты в Nuxt.js хранятся в папке Components. Приложение делят на компоненты для удобства разработки. Там может храниться переиспользуемый код. Например, не просто статичные куски HTML, а полноценные небольшие модули.

Простейший пример компонентов - это Header и Footer сайта. Нет смысла внутри каждой страницы дублировать их код.

Но Vue компоненты позволяют принимать в себя данные, менять свою работу на их основе, а также передавать результаты в прочие компоненты. В нашем простейшем приложении всего 2 компонента: TheHeader (шапка сайта) и PageForm. В названии компонента принято использовать минимум 2 слова. В страницу компоненты встраиваются по своему названию, например <TheHeader />.

Чтобы компонент работал, нужно сначала импортировать его в месте использования. Nuxt.js может делать это автоматически, если в nuxt.config.js прописать components: true. Если дописать Lazy перед названием компонента, то он будет подключаться асинхронно. Естественно, должно быть условие подключения v-if. Тогда код компонента не будет загружен на конкретной странице изначально, но при выполнении условия v-if компонент загрузится. Это ускорит первичную загрузку страницы.

Компоненты включают в себя html шаблон, скрипты и стили. Таким образом он становится самостоятельным элементом, который можно будет редактировать в одном месте, не меняя прочую функциональность программы. Чем компонент менее зависим от других компонентов и прочих внешних условий, тем лучше.

В компонент можно передать данные через Props. Например, в наш компонент PageForm мы передаём данные страницы и тип действия, которое мы хотим получить. Компонент является формой, которая управляет контентом страницы. То есть с помощью единого компонента можно создавать, редактировать и удалять динамически страницы.

Если мы передаём действие "create", то отображается кнопка "Создать страницу". По нажатию на неё выполняется метод createPage, который пересылает в бэкенд данные из формы с целью создания записи в базе. Если мы передаём действие "update", то отображаются 2 кнопки "Обновить страницу" и "Удалить страницу".

Через Props мы передаём в компонент с формой данные страницы, которую хотим обновить. Они подставляются в соответствующие поля формы. В самом компоненте можно указать тип данных для конкретных props и их значение по-умолчанию. В нашем случае данные страницы являются объектом.

Данные из компонента можно передать родительскому компоненту через emit. Общие данные и состояния можно хранить в Store и LocalStorage - тогда их можно будет получать и записывать из любых мест, но в дальнейшем это может привести к усложнению архитектуры приложения. Аналогично можно передать данные в компонент через provide/inject, но явность такой передачи также не самая оптимальная.

Автор: Александр Дергунов
Дата публикации: 27.3.2021 г.
Поделиться:

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
4662 просмотров4662
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
663 просмотров663
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
722 просмотров722
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
735 просмотров735
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
808 просмотров808
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
722 просмотров722
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
422 просмотров422
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
931 просмотров931
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika