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



@HiDiv

У меня есть компонент-страница, которая получает данные для отображения из внешнего источника через 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 + "https://qna.habr.com/" + compName + '.vue'))
    }
  })
}

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

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


Решения вопроса 0


Ответы на вопрос 2



@Kozack Куратор тега Vue.js

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



@Aetae

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *