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

Evil_Sperm спросил: 28 апреля 2018 в 08:48 в: vue.js

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


4 ответа

Max Sinev ответил: 28 апреля 2018 в 09:30

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

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

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

Thom ответил: 28 апреля 2018 в 10:07
Это хорошее решение. не знал, что он существует.
Evil_Sperm ответил: 28 апреля 2018 в 10:08
<component v-for="comp in components" :key="comp" :is="comp"></component> components=['pie','bar'] Это не сработало
Max Sinev ответил: 28 апреля 2018 в 10:13
Вы каким-то образом регистрируете компоненты с помощью Vue.component или components в родительском компоненте?
Evil_Sperm ответил: 28 апреля 2018 в 10:22
Да, я добавил их. <pie></pie> <bar></bar> это сработало
Max Sinev ответил: 28 апреля 2018 в 10:29
Прежде чем использовать их в разметке, вы должны зарегистрировать компоненты с одним из предоставленных способов в коде. Здесь jsfiddle с примером, как это сделать: ссылка
bbsimonbb ответил: 28 апреля 2018 в 11:36

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

Max Sinev ответил: 28 апреля 2018 в 12:09
Я чрезвычайно согласен с вами, component полезен только в нескольких ситуациях. Но решение заключается в применении только тега компонента single с директивой v-for, которая улучшит понимание кода вместо добавления 100 м подобных компонентов в разметку (также увеличивает размер пакета приложения).
Evil_Sperm ответил: 29 апреля 2018 в 09:30

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

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

Max Sinev ответил: 01 мая 2018 в 08:17
В общем случае он не нуждается в обертке div, см. Мою ссылку jsfiddle в комментарии к ответу. Я думаю, вы можете отметить мой ответ как правильный.
Thom ответил: 28 апреля 2018 в 09:47

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

В целом есть три вещи.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
Thom ответил: 28 апреля 2018 в 10:07
Ах, я, возможно, неправильно понял вопрос и ответил, если можно программно добавить компоненты.