Vue.js Basics: What Slots are and when use them?

Introduction

Vue implements a content distribution API inspired by the Web Components spec draft, using the <slot> element to serve as distribution outlets for content.

In simple words, slots help you position content in a component, and allow parent components to arrange it. It’s especially useful when we want to create reusable widgets, cards or even modals.

On the following approach we will make sure that our distributed content be exactly distributed inside the child component as we want.

How to use Slots

Using it is very simple, we should write the <slot> component (which is a reserved word in Vue.js) inside the child component’s template, where we want to receive data.

The <slot> component described above is going to take over and renders the content we are passing from parent component. So it renders parts between opening and closing selectors of the child component in the parent component. So in the parent component:

So basically it allows you to pass data from parent component and render it on the child component. And this data can be anything!

Styling and Compiling

The child component’s styling is applied to the data being passed in from parent component (as slot). So if we want to style your slot data, we should put our styles inside the child component and if we put these styles in the parent component (of-course if they’re not global!), they won’t work.

For compiling a template, the component where we have the code in it’s the parent component and it will be the one doing the changes!

So for example, if you want to use some variable defined on data object you have to declare it where you wrote the code (parent component) and not where it passed (child component).

It’s true that we pass it finally to the child component but we write it in the parent component and it would take care of vue.js operations.

Parent Component:

Child Component:

Rendered HTML:

Default value for a slot

If we’re not sure that content will be passed to our child component or not, we can set up some default content to be displayed (in case of slot absence). For that we just need to write some data inside the opening and closing tags of <slot> in the child component.

Rendering multiple slots in different places on a child component

If we’re passing multiple components from parent to child and we want to render them in different places in our child component we should use the named slot feature of the Vue.js.

In order to do that, in the child component we just need to add an attribute called “name” and give it one! Then in the parent component where we are passing the content, we should add a new attribute called slot in our component (or selector). So Vue.js will render the component with slot attribute in the <slot> component of the child with the exact value.

Scoped Slots

Sometimes, it’s useful for slot content (in the parent component) to have access to data which is only available in the child component. This is the case when you have some variables in your data object of your child component and somehow you want to access them in your parent component. 😉

Child component:

Parent component:

Example