Vue: Components/templates as props

Question

I am currently trying to learn vue and struggling with the whole component concept.

Let's say I have some components that define tabs(like browser tabs).

This component has a prop called name.

So you'd maybe use the component like so:

<tab :name="tab.display_name"></tab>

However lets say things need to be a bit more complex. Like for example, you don't just want the name to be a string, but regular HTML. Okay, so, you can use the prop in a v-html directive and use the tab component like this:

<tab :name="'<span class=\'fancy-styling\'>' + tab.display_name + '</span>'"></tab>

This one took me a while to figure out because of all the quotes. Is there a way to escape this escape hell(pun totally intended)?

How could I take it this out into its own snippet/template?

And what if we make it even more complex - say we require the prop be a vue component?

<tab :name="'<my-custom-component @click="onClick()">' + tab.display_name + '</my-custom-component>'"></tab>

The last one is invalid on a number of levels, not the least of which being the mess of quotes.

How would I accomplish this? What is the best approach?

Answer 1

If you are trying to inject html in props, you should really be looking at using slots.

https://vuejs.org/v2/guide/components-slots.html