Как динамически зарегистрировать локально новый компонент vue?

Question

[Дмитрий Иванов]

У меня есть компонент-страница, которая получает данные для отображения из внешнего источника через ajax. В самом проекте реализовано довольно много виджетов для разных типов полей (компонентов, которые могут быть задействованы на форме). Очень не хочется описывать их все в componets даже через асинхронную загрузку, т.к. фактически за один "сеанс" с источником данных используется не более 10%-20% от общего количества виджетов-компонентов. При следующем получении данных могут потребоваться уже частично или даже полностью другие виджеты-компонеты.

Как динамически регистрировать компонеты я вообще не нашел, но вроде придумал, как делать это глобально:

export function registerFieldComponents(prefix: string, fieldTypes: string[]) {
  fieldTypes.forEach(type => {
    const compName = getComponentNameForField(prefix, type)
    const comp = Vue.component(compName)
    if (typeof comp === 'undefined') {
      Vue.component(compName, () => import('components/fields/' + type + '/' + compName + '.vue'))
    }
  })
}

Такое решение, почему-то периодически перестает работать, т.е. процесс регистрации новых компонентов выполняется и Vue.component для новых типов вызывается, но на самом компоненте страницы в this.$options.components (в секции proto конечно) глобально зарегистрированные компоненты отсутствуют... Причем не все, а только часть, которые добавляются при очередном обновлении данных.

Еще раз. Основная задача зарегистрировать динамически (при необходимости) дополнительные компоненты (желательно локально), пути и названия которых известны (по маске), но при этом не прописывать каждый из таких компонентов явно.

Answer 1

[Alex]

Компоненты Vue это обычные объекты с определёнными свойствами. И создавать вы их можете как угодно и где угодно.
Вот пример

Comments

[Дмитрий Иванов]

Если честно, то не понял, как ваш пример может быть ответом на мой вопрос.
Забыл уточнить вначале, разговор про 2-ю версию vuejs.

Я знаю, что компоненты это обычные объекты, но еще раз повторюсь. Сами компоненты расположены в отдельном каталоге в виде файлов с vue расширением. На этапе сборки приложения я не знаю, какие из них понадобятся в процессе выполнения. Явно перечислять их все, даже через () => input(), я не хочу. Новые компоненты в runtime должны добавляться и регистрироваться по потребности.

Answer 2

[Aetae]

Вообще твоё решение должно работать. Если не работает, причём не сразу - надо дебажить и возможно репортить.

Как обходной путь можно попробовать сразу их зарегистрировать всех(как динамические компоненты). Первый параметр Vue.component - имя можно через require.context получить, второй параметр - функция с import.

Comments

[Дмитрий Иванов]

Я понимаю, что должно. Более того, оно большую часть времени работает, но периодически (мы так и не смогли точно поймать момент) работать перестает. Есть подозрения, что это как-то связано с тем, заходим ли мы на компонент-страницу, которая содержим эти компоненты сразу (через url) или через навигацию приложения и делаем ли мы обновление страницы с hard reset браузера.

Получается, что глобальная регистрация компонентов выполняется в асинхронной функции (action vuex) через глобальную же Vue, не видна в this.$options.components компонента-страницы. Это видно через тестовую печать в console.log.

Пока сделал такое решение

registerComponents(fieldTypes: string[]) {
    console.log('Вошли в регистрацию', fieldTypes)
    fieldTypes.forEach(type => {
      const compName = getComponentNameForField('Lv', type)
      if (typeof this.$options.components[compName] === 'undefined') {
        console.log('Регистрируем '+ compName)
        this.$options.components[compName] = () => import('components/fields/' + type + '/' + compName + '.vue')
      } else {
        console.log('Уже есть '+ compName)
      }
    })
  }

Оно конечно не соответствует документации, но пока при тестировании ошибок больше нет...

[Aetae]

HiDiv, ты ещё проверь, у тебя случаем две версии Vue одновременно не затесались? Подключаешь к одной, а рисуешь другой. Такое бывает когда код сильно модульный.)