Dallashunter860

Slots are another way in Vue for a component to inject content into a child component. This does this using template code. In terms of final output, slots perform a similar function as props in Vue — getting data from a parent component to a child component. Slots are also helpful at creating reusable code. Slots are super-powerful in Vue.js. They let you inject components from a parent into a various parts of the child, helping you compose nice and generic components. But that’s not all! We’ll take a run-up to dynamic scoped slots through the following. Learn everything you need to know about using slots in Vue.js to create customizable, reusable components for your apps. In a Nutshell, Why Should I Care about Slots? 🤔 When you are building reusable components with Vue.js, you may need to inject some kind of content from the parent. Vue.js documentation: Using Slots in Vue JSX with 'babel-plugin-transform-vue-jsx'.

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

Oftentimes you will need to allow your parent Vue components to embed arbitrary content inside of child components. (Angular devs, you know this as transclusion or content projection.) Vue provides an easy way to do this via slots.

Basic Usage

To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot with <child-component><p>MyParagraph</p></child-component>.

Note: If there is no <slot></slot> element in the child’s template, any content from the parent will be silently discarded.

Fallback Content

If the parent does not inject any content into the child’s slot, the child will render any elements inside its <slot></slot> tag, like so:

Named Slots

Having one slot to inject content into is nice and all, but oftentimes it would be preferable to be able to inject various types of content at different locations in the child component. Say you’re making a burger component. You want the top and bottom buns to be predictably at the top and bottom of the burger, (don’t you?) but also want to be able spread things on the bun halves.

Vue allows us to do this by way of named slots. Named slots are simply slots with a name attribute <slot name='slotName'></slot> to allow for namespaced content injection.

Obviously I don’t have a clue as to how to make burgers, but that should at least serve as an understandable guide to Vue slots. Enjoy!

A component can be 100% responsible for generating its output, like in this case:

or it can also let the parent component inject any kind of content into it, using slots.

What is a slot? It’s a space in your component output that is reserved, waiting to be filled.

You define a slot by putting <slot></slot> in a component template:

Slot Vue Js

When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:

If you put any content side the <slot></slot> tags, that serves as the default content in case nothing is passed in.

A complicated component layout might require a better way to organize content, with multiple slots as well.

This is why Vue offers us named slots.

Named slots

With a named slot you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.

Slot In Vue Js

Anything outside any template tag is added to the main slot.

Vue Jsx Slot Props

For convenience I use a page single file component in this example:

Here is how we can use it, providing the slots content, in a parent component:

There is a handy shorthand, #:

Note: Vue 2.6 deprecated the slot attribute in favor of v-slot, and requires it to be added to a template tag (while slot could be applied to any tag)

Scoped slots

In a slot, we can’t access the data contained in the child component from the parent.

Vue recognizes this use case and provides us a way to do so:

In the parent we can access the dog name we passed using:

slotProps is just a variable we used to access the props we passed. You can also avoid setting a variable just to hold the props you pass to the child component, by destructuring the object on the fly:

More vue tutorials: