Как быть с типизированными компонентами?

Question

[Artem0071]

В общем есть некая проблема
Есть некий feed, в котором есть разные типы новостей, например raz, dva, tri

И с апи приходят данные в таком формате:

[
{
  type: 'raz',
  data: {...}
},
{
  type: 'dva',
  data: {...}
},
...
]

Для каждого типа есть свой компонент который на входе принимает данные через props
Как будет правильнее сделать импорт этих компонентов

Пока что так, но мне кажется что это что то не то

<template>
    <div>

        <div v-for="item in feed">

            <feed-raz v-if="item.type==='raz'" :data="item.data" />
            <feed-dva v-if="item.type==='dva'" :data="item.data" />
            <feed-tri v-if="item.type==='tri'" :data="item.data" />

        </div>

    </div>
</template>
<script>
    import feedRaz from './feedRaz'
    import feedDva from './feedDva'
    import feedTri from './feedTri'

    export default {
        components: {
            feedRaz, feedDva, feedTri
        }
    }
</script>

Answer 1

[0xD34F]

Тут явно напрашивается использование is, должно получится что-то вроде

<component :is="item.type" :data="item.data"></component>

А чтобы вручную не импортировать каждый из компонентов, воспользуйтесь require.context.

Comments

[Андрей Седышев]

Почему не import()?

[Artem0071]

Андрей, Да, с import тоже нормально работает

components: {
            feedRaz: () => import('./feedRaz')
        },

[Artem0071]

Спасибо за "is", забыл о нем совсем

[0xD34F]

Андрей,

Почему не import()?

Чтобы написать один раз и навсегда. Ну, то есть - сейчас три компонента, которые выполняют одну и ту же задачу немного по-разному. Что если потом станет четыре? А ещё раз потом - пять? Каждый раз придётся вписывать новый import. А с require.context можно импортировать все нужные компоненты, не указывая никаких конкретных имён. Кладём их в отдельную папку, настраиваем импорт - и забываем о нём. Можно будет добавлять новые компоненты, удалять те, что есть, переименовывать файлы - не внося изменений в код импорта.

[Artem0071]

0xD34F, а как это в итоге сделать? Что то не могу понять как это в компонент вписать..

[0xD34F]

Artem0071, создаёте папку feeds, например, кидаете туда файлы с компонентами - все эти feedRaz, feedDva и т.д. Там же, в папке, создаёте index.js, пишете в него что-то вроде

const context = require.context('./', false, /\.vue$/i);

export default context.keys().reduce((modules, path) => ({
  ...modules,
  [/[a-z]+/i.exec(path).pop()]: context(path).default,
}), {});

Там, где сейчас у вас импорт - заменяете import feedRaz from './feedRaz' и т.п.
на import feeds from './feeds/';, эти feeds и передаёте в components:

components: {
  ...feeds,
}

[Artem0071]

0xD34F, Это просто магия какая то сейчас происходит ахах
Спасибо Вам большое, буду разбираться как это работает

[Artem0071]

0xD34F, Еще вопросик..
Вот если я делаю так: feedRaz: () => import('./feedRaz'), то, если посмотреть в загружаемые ресурсы, будут загружены только те компоненты, которые нужно задействовать (ленивая загрузка вроде или как то так)
А в вашем примере получается что все подгружается разом
Можно ли это как то исправить?

[0xD34F]

Artem0071, честно говоря, я без понятия.