Let us assume we have 100 components. We usually add the component selector/name in HTML tags to the template of the parent component.But here we have 100's of components, so is there any dynamic way to add them??
5
-
1I don't understand what you're asking, could you give an example of what you are currently doing manually?FINDarkside– FINDarkside2018-05-22 10:54:42 +00:00Commented May 22, 2018 at 10:54
-
link In that example pie, bar are the components. We add them using <pie></pie> and <bar></bar> tags respectively in main component.But what if we have 100 components like that. Is there any dynamic way to add them.Evil_Sperm– Evil_Sperm2018-05-22 11:13:29 +00:00Commented May 22, 2018 at 11:13
-
I still don't get it, there's no pie or bar in the example you posted.FINDarkside– FINDarkside2018-05-22 11:20:46 +00:00Commented May 22, 2018 at 11:20
-
link In that example pie, bar are the components. We add them using <pie></pie> and <bar></bar> tags respectively in main component.But what if we have 100 components like that. Is there any dynamic way to add them **I'm so sorry I forgot to save it **Evil_Sperm– Evil_Sperm2018-05-22 11:36:45 +00:00Commented May 22, 2018 at 11:36
-
So you have 100 different components? Max Sinev posted an answer that should work in that case, but you still need to write a list of all the components obviously. It might be possible that there's a better way than having those 100 components in the first place, but hard to tell with the given info.FINDarkside– FINDarkside2018-05-22 11:47:39 +00:00Commented May 22, 2018 at 11:47
Add a comment
|
4 Answers
There is a Vue tag:
<component :is="myComponent"></component>
Where myComponent is component name or whole component object. You can create array with component names and render them with v-for dynamically. See Vue Docs for details about dynamic component.
6 Comments
Thom
This is a nice solution. did not know it existed.
Evil_Sperm
<component v-for="comp in components" :key="comp" :is="comp"></component> components=['pie','bar'] This didn't work
Max Sinev
Do you register components somehow with
Vue.component or components section in parent component?Evil_Sperm
Yes I have added them.
<pie></pie> <bar></bar> this worked well |
Yes there is a way to dynamically add components.
In general there is three things. 1. instantiate the component 2. mount the component 3. add it to the dom tree
var ComponentClass = Vue.extend(Component)
var instance = new ComponentClass() //instantiate
instance.$mount() //mount
this.$refs.container.appendChild(instance.$el) //add to dom
1 Comment
Thom
Ah, I might have misunderstood the question and answered if it is possible to programmatically add components.
Please don't do this. The <component :is> trick is handy to know, but this is a bit like getting a wedding invitation with the name of the bride on a sticky label - not convincing. You need to commit yourself sometime. The template with lots of of <component :is> tags will be impossible to understand and maintain.
1 Comment
Max Sinev
I extremely agree with you,
component is useful in just few situations. But the solution is to apply just single component tag with v-for directive that will improve code understanding instead of adding 100s of similar components in markup(causes increasing app bundle size as well).This worked!!!!!
<div v-for="comp in components" :key="comp">
<component :is="comp"></component>
</div>
1 Comment
Max Sinev
It doesn't need
div wrapper in general, please see my jsfiddle link in my answer comment. I think you can mark my answer as correct one.