# Slots

Sometimes props are not going to cut it.

Let me explain: if you wanted not only to pass data to your components, but rather an entire layout or the content with the styles and structure that you prefer... then doing it via props won't be enough. Furthermore, you can pass in other components!

Luckily Vue.js comes to the rescue once more. By using this Slots feature, you can have components that render exactly what you want them to, the way you intend it.

TIP

Official docs, as usual here

# Syntax

Nope, there is no slots property on the config object this time 😛.

But still something I got used to really quick. Consider this to be the markup template for a <my-component></my-component> component:

<!-- ** component definition ** -->
<div>
    <h2>Welcome to my component</h2>
    <p>The following is the dynamic content I got from the outside world:</p>
    <slot> <!-- Dynamic content will be rendered here!  --> </slot>
</div>

1
2
3
4
5
6

When implemented, my-component will grab anything you pass inside of it and render it where the <slot> was defined.

So, implementing it:

<!-- ** component implementation ** -->
    <my-component>
        <p>
            Hello, this is the dynamic content
        </p>
    </my-component>

1
2
3
4
5
6

Yields:

<div>
    <h2>Welcome to my component</h2>
    <p>The following is the dynamic content I got from the outside world:</p>
    <p>
        Hello, this is the dynamic content
    </p>
</div>

1
2
3
4
5
6
7

You can also define default content, as well as pass in other components.

An important bit to remember here, is that the inner content will only "see" variables from the scope in which it was defined, not the ones that live inside the component itself. Hopefully that can be clearer if you look into the example pen.

# Example

See the Pen 10. Slots (intro) by @ackzell on CodePen.

# Named Slots

One use case for slots is having a certain layout on a component that you want to fill in with different parts of content.

Delimiting this way, you can provide a way for others to insert the content on the appropriate spot.

# Syntax

All you have to do to create named slots is declare them on the template of your component:

    <!-- when declaring the component template -->
    <slot name="mc-header"></slot>

1
2

Next, when you want to use it, you'd make use of a template tag (the HTML one) combined with the v-slot: binding and go:

    <!-- when implementing the component -->
    <template v-slot:mc-header>
        <h1>
            My awesome header
        </h1>
    </template>

1
2
3
4
5
6

And if you wanted to type (and read) even less, there is a shorthand for ya:

 <!-- when implementing the component -->
    <template #mc-header> <!-- same as typing `v-slot:mc-header` -->
        <h1>
            My awesome header
        </h1>
    </template>

1
2
3
4
5
6

So you could have different named slots for different "parts" of your component. Note that if you left any slot without a name, what will be considered the default slot and will be filled in with content you didn't wrap with specific slots.

# Example

Consider the following pen, where we allow for a header, a footer and a body "parts" of our component implementation:

See the Pen 11. Named Slots by @ackzell on CodePen.

← Custom Directives Transitions and animation →