Как добавить несколько компонентов в родительский компонент в Vuejs

Question

Предположим, у нас есть 100 компонентов.Обычно мы добавляем селектор / имя компонента в тегах HTML в шаблон родительского компонента. Но здесь у нас есть сотни компонентов, поэтому есть ли какой-нибудь динамический способ добавить их ??

Answer 1

Это сработало !!!!!

<div v-for="comp in components" :key="comp">
    <component :is="comp"></component>
 </div>

Answer 2

Да, есть способ динамического добавления компонентов.

В общем, есть три вещи.1. создать экземпляр компонента 2. смонтировать компонент 3. добавить его в дерево dom

var ComponentClass = Vue.extend(Component)
var instance = new ComponentClass() //instantiate
instance.$mount()  //mount
this.$refs.container.appendChild(instance.$el) //add to dom

Answer 3

Пожалуйста, не делай этого.Трюк <component :is> удобно знать, но это немного похоже на получение приглашения на свадьбу с именем невесты на клейкой этикетке - не убедительно.Вы должны посвятить себя когда-нибудь.Шаблон с большим количеством тегов <component :is> будет невозможно понять и поддерживать .

Answer 4

Существует тег Vue:

<component :is="myComponent"></component>

Где myComponent - имя компонента или весь объект компонента.Вы можете создать массив с именами компонентов и динамически отобразить их с v-for .См. Vue Docs для получения подробной информации о динамическом компоненте.