Vue Slot Props

Slot Content Vue Native just like Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the element to serve as distribution outlets for content. In order to allow a parent component to pass elements into a child component, provide a element inside the child component. The slots are passed as functions, allowing the child component to control the creation of each slot's contents. Any reactive data should be accessed within the slot function to ensure that it's registered as a dependency of the child component and not the parent. Slots are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic. The best way to understand them is to see them in action. Let’s start with a simple example. Vue.js simplified: components, props, and slots December 10, 2020 8 min read 2425 In this article, we will be using Vue.js, Vue CLI and Bootstrap CSS.

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.

However, whereas props pass data values to the component, slots can just pass direct template code. I think that this comes with a few benefits depending on the situation:

• Your child component is more reusable — you can pass it different components without worrying about a consistent format/data values
• It’s a lot more flexible — you don’t always have to fill every value whereas with props, you’d have to worry about checking if values exist using v-if
• This may be a personal thing, but I think the child component looks a lot more readable

I think the best way to wrap your head around slots is to just see an example of how to use them and what actually happens.

The Simplest Use Case

Starting off with slots is a typical use case in which we simply declare a slot in the child component and inject content using the parent component.

Let’s check it out. First, let’s setup a parent component called MyContainer.vue

Next, let’s setup a child component MyButton.vue component.

When, MyButton.vue renders, the <slot> will be replaced by Click Me! — the content from the parent.

You can pass any sort of template from the parent component, it doesn’t have to be just text. It can be a Font Awesome icon, image, or even another component.

Need Multiple Slots? Name ‘Em!

The best way to organize a slot-based component system is to name your slots. This way you can make sure you’re injecting content into the right part of your component.

As you would expect, this is done by adding a name attribute to the slot in your child component. Then, to add content from the parent, you simply have to make another <template> element and pass the name in an attribute called v-slot

Let’s see this in action.

Then a parent component.

Note: if a slot is not named. It will just have the name of default

Passing Data Scoped Slots

Another neat thing about slots is that you can give the parent component scoped access to data inside the child.

For example, if the child component is using a data object to determine what it displays, we can make that data visible to the parent and use that while we pass our injected content.

Once again, let’s just check out an example.

If we have this article header slot inside a child component Article.vue— in this case, our fallback data is the article title.

Now let’s move on to the parent component. What happens if we want to change the content to show the article’s description instead? We wouldn’t be able to do this because our parent component does not have access to the the article object inside its child, Article.vue

Thankfully, Vue can handle this situation pretty easily. We can bind data from the child slot to the parent template with a simple v-bind

Let’s look at our modified div.

There. Our parent component has access to this attribute. Now, let’s see how to access it.

Similar to when passing data to a component using props, our child component passes a props object with all of the bounded attributes as children.

All we have to do is name this object in our template and then we can access them. We’ll name it articleInfo for now, but this is just a variable so you can use anything your heart desires.

Easy right?

Using Slots to Make Components More Flexible

Props are a great way to reuse components, but they have their limitations depending on your use case. Props tend to work best in components that have the same format and content, but just different values.

Sometimes you need to make your components a little more flexible and adaptible: maybe you want some components to have certain sections while depending on the what page it’s on, you want to remove other sections.

By injecting your content using slots, it makes it easier to switch around the content of a component without having to worry about using template logic like v-if and v-else to handle rendering.

That’s All Folks

I hope this little article helped teach you a thing or two about the possibilities of using slots to organize your Vue projects.

As always, for more information and to get into the more technical details, check out the Vue documentation.

Happy Coding!

Vue 2.6 is released with new syntax for Slots using v-slot directive. In this tutorial, we’re gonna show you:

• Syntax to use Vue Slot with v-slot directive along with its shorthand
• How to use Vue Named Slots with v-slot & examples
• How to use Vue v-slot for Scoped Slots & examples
• Vue Dynamic slots example

Related Post: Vue 3 Composition API tutorial with examples

Contents

Vue slots syntax with v-slot directive

With new v-slot directive, we can:
– combine html layers: component tag and scope of the slot.
– combine the slot and the scoped slot in a single directive.

For example, this is old syntax with slot-scope:

This is how we combine ListComponent and template tag:

And this is old named slots syntax:

Now we use new Vue v-slot directive:

You can see that:

– We use <template v-slot:header> to wrap <p> tag instead of <p slot='header'> directly. This is because Vue v-slot can only be used in <component> or <template> html tag. It cannot be used in plain HTML tags (<p> for example).

– We replace slot='content' slot-scope='{data}' with v-slot:content='{data}' by combining slot & slot-scope. With new Vue v-slot directive, all slots are compiled into scoped slots. It improves the performance. Why?

Normal slots are rendered during the parent component’s render cycle. So, if any dependency of a slot changes, both the parent and child components will be re-rendered.

When we use scoped slots, slots are compiled into inline functions and called during the child component’s render cycle. This means:

• data from a scoped slot are collected by the child component which is re-rendered separately.
• the changes of parent scope dependency only affect the parent, not the child component. So the child component doesn’t need to update if it uses only scoped slots.

Shorthand for v-slot

# is the shorthand for Vue v-slot directive.
For example, #content stands for v-slot:content.

The code above can be written as:

Remember that when using shorthand, we must always specify the name of the slot after # symbol. We cannot use shorthand like this: #='{item}'.
It must be: #default='{item}' in which, #default is the shorthand for v-slot:default.

In the next parts, we show you some examples that apply new Vue v-slot directive in practice.

Vue v-slot examples with Named Slots

If we want to use multiple slots in one component, Named Slots are useful.
The code below shows BkrCard component template with 3 slots:

• header
• title
• default

Remember that <slot> without name attribute has the name default.

Now look at the parent component which use v-slot directive to specify name for named slots on <template> tag:

The result will be:

If we pass only one named slot, the default value will be shown:

Vue v-slot example with default slot

In the example above, we use <template v-slot:default> for the default slot.

We have other ways to specify html code to be considered as default slot also:

– wrap it in a <template> without Vue v-slot directive:

– do not wrap it in a <template>:

The result are the same for 2 cases:

Vue v-slot examples with Scoped Slots

What we should do when we want a child component to allow parent component access its data?

In this example, categories need to be available to the slot content in the parent. So we bind the categories as an attribute to the <slot> element:

The categories attribute is called slot props.
In the parent scope, Vue v-slot directive can help us get value of the slot props above:

Vue Slot Examples

The result will be:

• Dart
• Flutter
• Vue.js

Vue Component Slot

This is shorthand for v-slot:

Vue Dynamic slots example

We can use a JavaScript expression in v-slot directive argument with square brackets:

Now look at the example:

Clicking on the Change button will change the collection value dynamically.
v-slot:[collection]='{categories}' could become:

• v-slot:default='{categories}'
• v-slot:new_categories='{categories}'

Vue Slot Pass Props

This is BkrCategories component with default and new_categories slot name:

Vue Slot Event

The result will be:

Vue Slot Props Games

Conclusion

Vue Jsx Slot Props

We’ve learned almost aspects of new Vue v-slot directive, from v-slot syntax to its handshort, then apply v-slot directive on Named Slot examples to Scoped Slots and Dynamic Slots examples.

Vue Slot Component Props

Happy learning! See you again!

Further reading