• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Create Flexible Components Using Slots

Log in or subscribe for free to enjoy all this course has to offer!

What Are slots?

While props can be powerful, they introduce a level of complexity since they require knowledge of the props for the component to be utilized properly. Also, you can get "props chaos" when a component requires multiple ones to work properly.

<custom-banner size="small" left-icon="info" text="Hello" />

If you need the component to have a more open-ended solution, Vue has you covered with the slot technique:

The  <slot>  element serves as an outlet for content the developer can dynamically define without predetermined props. Think of it is as a mail slot where any kind of mail can be put in as long as it's empty.

Using a custom-banner component gives users the ability to define different custom banners without props chaos. For example, let's say that we wanted the following to render from our CustomBanners component:

<div class="small">
<p><icon name="info" /> Informational Banner</p>
</div>
<div class="small">
<p><icon name="warning" /> Warning Banner <icon name="warning" /></p>
</div>

If this were done solely with props, it might look something like this:

<custom-banner
size="small"
left-icon="info"
text="Informational Banner"
/>
<custom-banner
size="small"
left-icon="warning"
text="Warning Banner"
right-icon="warning"
/>

More importantly, the CustomBanner component template block would look something like this:

src/components/CustomBanner.vue
<template>
<div :class="size">
<p><icon v-if="leftIcon" :name="leftIcon" /> {{ text }} <icon v-if="rightIcon" :name="rightIcon" /></p>
</div>
</template>

Even in this simple example, the template block is already looking pretty difficult to read. However, it we use slots instead:

src/components/CustomBanner.vue
<template>
<div :class="size">
<slot></slot>
</div>
</template>

That's it! As you can see, the slot becomes an open-ended area for developers to add in custom content without needing a bunch of conditionals to handle different prop scenarios.

Setting Default Content on a Slot

Similar to setting a default value for props, you can also set default content for a slot. This is particularly useful when you have standard content you want displayed unless the developer sets something custom.

To give the custom banner fallback content, place it within the  slot  tags in the  template  block.

<template>
<div :class="size">
<slot>Hello User!</slot>
</div>
</template>

How to Use Multiple Slots

You might also be wondering, "What if I want to use multiple slots in a component?" That would be a great question! Let's take a simple card component as an example:

<template>
<div class="card">
<h2>Card Title</h2>
<p>Card Text</p>
<button>Card Action</button>
</div>
</template>

We could configure this component with props, but it would be a nightmare to manage as it grows. However, we have three different slots that can be defined by a developer. To solve this, we need named slots.

Named slots allow you to designate names for slots so developers can refer to them later. In the instance of our card component, give each slot a  name  prop, which we will refer to shortly.

<template>
<div class="card">
<slot name="title">Card Title</slot>
<slot name="text">Card Text</slot>
<slot name="action">Card Action</slot>
</div>
</template>

When we want to invoke our component, as of v2.6+, we will invoke the  v-slot  directive on a  template  element as follows:

<template>
<Card>
<template v-slot:title>
<h3>Named slots are useful!</h3>
</template>
<template v-slot:text>
<p>Now we can put anything in here by designating the slot name!</p>
</template>
<template v-slot:action>
<a href="#">Learn More</a>
</template>
</Card>
</template>

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P3C4-Begin  branch.

Instructions

Refactor  BaseButton  component to use slots instead of the props currently defined.

Let's Recap!

In this chapter, you learned about:

  • The difficulties with props chaos. 

  • Defining slots on components.

  • Setting default content for slots.

  • Utilizing named slots to handle multiple slots.

Next, we will review what you have learned in this part of the course!

Example of certificate of achievement
Example of certificate of achievement