Как динамически отображать список / массив различных компонентов в Vue.js

Здесь я демонстрирую, как реализовать модульный раздел с вкладками, который отображается динамически и не позволяет разработчику вручную писать html для каждой вкладки. Это модульное решение, поскольку в нем повторно используются существующие компоненты. Шаблон будет динамически отображать компонент (из массива) в элементе зарезервированный ‹компонент› и привяжется к атрибуту: is.

В этом примере я создаю раздел с вкладками и визуализирую подкомпоненты внутри каждой вкладки. Код выполняет итерацию по массиву объектов section1Tabs из данных vue.js в ‹script› и отображает текущий tab.component из массива section1Tabs внутри зарезервированного ‹ component ›element (как описано в конце предыдущего абзаца).

Итак, в этом примере код будет отображать Subsection1.vue, а затем компонент Subsection2.vue. Как видите, вы можете постоянно добавлять в этот массив section1Tabs, и новые компоненты будут отображаться динамически.

<template>
<div>
<ui-tabs type=”text” ref=”section1Tabs”>
  <ui-tab v-for=”tab in section1Tabs :title=”tab.title”>
    <component v-bind:is=”tab.component”></component>
  </ui-tab>
</ui-tabs>
</div>
</template>
<script>
import Subsection1 from ‘@/components/Sections/Subsection1.vue’;
import Subsection2 from ‘@/components/Sections/Subsection1.vue’;
export default {
components: {
  ‘Subsection1’: Subsection1
},
data() {
  return {
    section1Tabs: [
        { title: ‘Subsection1’, component: Subsection1},
        { title: ‘Subsection2’, component: Subsection2},
    ]
  }
}
}

Ссылка: https://vuejs.org/v2/guide/components.html#Dynamic-Components