@NiceScript

Как сделать авто import во Vue?

Продолжаю разбираться во Vue.js,
Идёт запрос на сервер => сервер вытягивает нужные данные и какие компоненты должны использоваться (componentName: 'componentPath'):
used_components: 
{
   first: '@/components/first',
   second: '@/components/second'
},
......

Сейчас я просто подгружаю компоненты вручную
.....
name: 'Page',
    components: {
      first: () => import('@/components/first'),
      second: () => import('@/components/second')
    },
    data () {
      return {
        server_array: '',
        server_components: ''
      }
    },....


Как сделать импорт необходимых компонентов исходя из ответа сервера?
что-то вроде
name: 'Page',
    components:  server_components, // из даты берём (или как-то подругому)
    data () {
      return {
        server_array: '',
        server_components: '' //переопределим через methods
      }
    },
beforeMount () {
      this.getPage()
    },
methods: {
      async getPage () {
        const response = await Page.getPage()
        this.server_components = response.data.used_components
        this.setComponents(this.server_components)
      },
      setComponents (data) {
        for (var key in data) {
          () => import(data[key])
        }
      }
    }
....
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 2
@levchak0910
answer.correct ? press({correct: true}) : next()
data: {
    componentName: ""
}
async getPage () {
    const response = await Page.getPage()
    this.componentName = ...
}

<component :is="componentName"></component>
https://vuejs.org/v2/api/#component
Ответ написан
Splinter_1g
@Splinter_1g
.NET Core, VueJS
Через v-for для элемента component рендеришь компоненты из списка.
Пример на codesandbox
Но можно заметить, что оба компонента Component1 и Component2 импортированы в App компонент через импорт явно. Однако я такой подход в проектах не использую, а регистрирую все компоненты одним скриптом глобально (чтобы как говоришь "не писать 100 раз import"). Эту регистрацию можешь посмотреть в файле index.js в папке components. Сам index.js вызываешь через import или require в main.js (там эта строка закомментирована). Это проблема codesandbox'a, что тамошние настройки бабела выкинут исключение, что компоненты еще не были транспилены, поэтому регистрацию сделал локально в App.vue.
PS У себя при глобальной регистрации имена регаю lower-camel-case'ом (пример). Можешь побаловаться с этим в зависимости от того какие имена компонентов у тебя приходят с сервера.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы