Vue шаг за шагом. Динамическая загрузка компонент. Пример#9
Динамическая загрузка компонент
В этом примере компоненты разделены на отдельные файлы и сделана система динамической загрузки компонент. Разумеется, во Vue есть шикарный механизм разделения приложения на чанки, и при переходе к системам сборки нужно использовать возможности фреймворка. Этот пример лишь демонстрация того как это можно легко сделать и на сколько Vue гибкий инструмент. Для загрузки компонент используются навигационные хуки vue-router.
В app добавлено:
data: {
appVersion: '0.1',
components: [],
},
methods: {
componentsLoaded: function (component) {
if (this.components.indexOf(component) == -1)
this.components.push(component)
},
componentsReady: function (component) {
return this.components.indexOf(component) > -1 ? true : false
}
}
И две функции загрузки JS файлов и компонент.
const loadComponents = function(name) {
let version = ''
if (typeof app != 'undefined') {
if (typeof app.appVersion != 'undefined') {
if (app.appVersion != null) {
version = '?' + app.appVersion
}
}
}
if (loadComponents.components.indexOf(name) == -1) {
let jsfile = 'vue-app/' + name
loadJS(jsfile + version)
loadComponents.components.push(name)
}
}
loadComponents.components = []
const loadJS = function(name) {
if (loadJS.files.indexOf(name) == -1) {
let script = document.createElement('script')
script.src = name
script.async = true
document.head.appendChild(script)
loadJS.files.push(name)
}
}
loadJS.files = []
Описание компонент разнесены в разные файлы: default.js, client.js, seller.js, product.js
В конце каждого такого файла добавлена строка:
app.componentsLoaded('имя компоненты')
которая оповещает приложение о том, что компонента загружена и ее уже можно отображать.
В Роутах используем хуки, указывая файл с компонентами для загрузки:
{ path: '/client',
component: { template: '< client v-if="router.app.componentsReady('client')" /> ' },
beforeEnter (to, from, next) { loadComponents("client.js"); next() }
},
Компонент standard-table
Доработан компонент standard-table создана подсветка текущей строки.
Компонент standard-form
Создан компонент standard-form. Пока он работает только с текстовыми поля, в следующих примерах мы расширим его возможности.
Эти две компоненты являются дочерними и связывает их общий родительский компонент. Форма также не изменяет данные, она только их отображает и при нажатии на кнопки отправляет event. При необходимости Вы можете связать форму с данными напрямую. Но в данном примере в форму отправляется копия данных. Обратите на это внимание. И только после нажатия на кнопку «Save» отправляется сообщение родительскому компоненту и тот сохраняет данные. Такой подход гарантирует четкое понимание того когда сохраняются данные и гарантирует соответствие данных которые отображаются с теми данными которые реально сохранены на бекенде. Придерживаясь такого подхода Вы избавите себя от множества неоднозначностей особенно в сложных приложениях, где к одним и тем же данным может иметь доступ множество компонент.
Ссылки
Навигационные хуки: https://router.vuejs.org/ru/guide/advanced/navigation-guards.html
Резюме
В этом примере реализована собственная система динамической загрузки компонент и файлов JavaScript. При этом не использовались механизмы Vue для разделения приложения на чанки. Пример использования навигационных хуков vue-router для загрузки компонент. Пример формы для редактирования данных.
В следующем примере
Диалоги и Notifications, md-dialog, vuejs-dialog
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- Golang + Vue + PostgreSQL #2
- Golang + Vue + SQLite #1
- FOC Position Control. Векторне управління - Стабілізація положення
- Flask & Vue. Завантаження файлів. Приклад № 2.10
- Рекуперація. FOC і цікаві досліди
- Flask & Vue. OAuth. Приклад№ 2.9
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
