@HiDiv
fullstack разработчик (php, js, html, css, vuejs)

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

У меня есть компонент-страница, которая получает данные для отображения из внешнего источника через 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 конечно) глобально зарегистрированные компоненты отсутствуют... Причем не все, а только часть, которые добавляются при очередном обновлении данных.

Еще раз. Основная задача зарегистрировать динамически (при необходимости) дополнительные компоненты (желательно локально), пути и названия которых известны (по маске), но при этом не прописывать каждый из таких компонентов явно.
  • Вопрос задан
  • 273 просмотра
Пригласить эксперта
Ответы на вопрос 2
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Компоненты Vue это обычные объекты с определёнными свойствами. И создавать вы их можете как угодно и где угодно.
Вот пример
Ответ написан
Aetae
@Aetae Куратор тега Vue.js
Тлен
Вообще твоё решение должно работать. Если не работает, причём не сразу - надо дебажить и возможно репортить.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы