Оказание списка различных типов компонентов в Vue

Question

У меня есть список объектов. Каждый объект содержит поле type, которое используется для определения компонента, который необходимо визуализировать. Например, для типа paragraph мне нужно будет отобразить компонент с именем Paragraph. У меня примерно дюжина этих разных типов компонентов.

В данный момент я просматриваю список в Javascript. Я создаю div со случайным идентификатором и заменяю его компонентом Vue, который я создаю вручную, используя new [ComponentType]({ el: ... }). Однако для этого требуется манипулирование DOM. Есть ли лучший способ, который не требует ручного управления структурой DOM? v-for или аналогичный?

Answer 1

Да, есть лучший способ. Используйте Dynamic Components.

Вот пример, показанный в этих документах.

var vm = new Vue({ 
    el: '#example', 
    data: { 
    currentView: 'home' 
    }, 
    components: { 
    home: { /* ... */ }, 
    posts: { /* ... */ }, 
    archive: { /* ... */ } 
    } 
})  

<component v-bind:is="currentView"> 
    <!-- component changes when vm.currentView changes! --> 
</component>