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. Финальный пример