Dynamic Components, how to use the same component multiple times?


Using this fiddle as an example: https://jsfiddle.net/chrisvfritz/Lp20op9o/

How can I add another tab-posts component as another tab?

For example, having | Posts | Archive | Posts 2 |, with Posts 2 being a tab-posts component just like Posts

If you use the component tag in html multiple times, vue creates multiple instances of that component right?

However binding to the is of <component> doesn’t work for the new tab since it’s going to have the same name for the component as the Posts tab, and it won’t create a new component.

What would be the right way of doing such a thing?

Thank you!


Depends on what you need the Posts component to do.

If it functions the same, but displays different data then you could pass the data with a prop.

If it functions the same, but has a different template, you could make use of extends.


In this case I’d just like the new Posts component to behave like a new instance, same template, one Posts component can be looking at the same set of posts as the other, or entirely different content.

Would it make sense to have the data passed as a prop instead of having the component itself get its content through an ajax call?


Yes. This is how we keep components modular. Make the XHR call in the parent and pass the data as a prop.