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. Финальный пример
Недавні записи
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
- Своя бібліотека для векторного керування безколекторними моторами
- Not Allowed
- Адаптивний ПІД регулятор
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
Tags
tim nodemcu encoder pwm solar watchdog atmega mongodb timer ngnix mpu-6050 options docker gps html foc esp8266 barometer bkp examples mpx4115a bldc pmsm programmator wifi bmp280 dht11 stm32 websocket bme280 usb bluetooth flask uart sensors max1674 motor i2c rtc hih-4000 remap flash capture dma rs-232 led mpu-9250 3d-printer eeprom adc books sms web usart battery avr rfid python gpio exti ethernet java-script eb-500 displays smd dc-dc lcd css ssd1331 ssd1306 meteo servo nvic soldering brushless git raspberry-pi st-link piezo
Архіви