Slots, Named Slots, and Scoped Slots

Another component composition pattern that enables reusability in Vue.js is slots.

Slots are sections of a component where the template/rendering is delegated back to the consumer of the component.

Here, props can be thought of as data that is passed from a parent to a child for said child to run some logic or to render it.

Slots can be thought of as templates or markup that's passed from a parent to a child for said child to render.

Passing Markup to Be Rendered in a Child Component

The simplest type of slot is the default child slot.

We can define a Box component with a slot as follows. Note that this Box component does very little:

<template>
  <div>
    <slot />
  </div>
</template>

The following markup is for the parent component (src/App.vue):

<template>
  <div>
    <Box>
   ...