Understanding Vue.js Slots

Slots allow you to embed arbitrary content in a Vue component. Slots are the Vue equivalent to transclusion in Angular and child props in React.

For example, suppose you wanted a component called green that added a green background behind child content. Here's an example of such a component using slots.

Vue.component( 'green' , { template: ` <div style="background-color: #00ff00"> <slot></slot> </div> ` }); const app = new Vue({ template: ` <green> <h1>Hello, World!</h1> </green> ` });

You can also define default inner HTML. If there's no inner HTML underneath <green></green> , Vue will use the inner HTML of <slot></slot> as shown below.

Vue.component( 'green' , { template: ` <div style="background-color: #00ff00"> <slot> <h2>Hello, World!</h2> </slot> </div> ` }); const app = new Vue({ template: `<green></green>` });

Named Slots

Sometimes you need multiple slots. For example, suppose you're writing a brand component that has two slots, 'name' and 'logo'.

Vue.component( 'brand' , { template: ` <div class="brand"> <div class="logo"> <slot name="logo"></slot> </div> <div class="name"> <a href="/"> <slot name="name"></slot> </a> </div> </div> ` }); const app = new Vue({ template: ` <brand> <template v-slot:logo> <img src="https://masteringjs.io/assets/logo.png"> </template> <template v-slot:name> Mastering JS </template> </brand> ` });

The output HTML looks like this:

<div data-server-rendered= "true" class = "brand" > < div class = "logo" > < img src = "http://masteringjs.io/assets/logo.png" > </ div > < div class = "name" > < a href = "/" > Mastering JS </ a > </ div > </ div >

Here's the rendered HTML:

More Vue Tutorials