In this article, we will fully understand the vue slots through the practical application of its various use cases. Let’s start with knowing about vue slots first.

What are Vue Slots?

Slots are reserved spaces offered by VueJs to display content passed down from one component to another. There are two types of slots in vuejs namely: named slot and unnamed(default) slot.

Practical Use Case of Vue Slots

  • To pass down HTML elements from one component to another. 

With props, Vue allows us to pass strings, objects, arrays, and functions from a parent component to its child component. While we can pass HTML elements from a parent to its child component as a string this will make our website vulnerable to cross-site scripting attacks that is why VueJs provides us with a slot that is a more secure and reliable method of passing HTML elements and other contents from parent to its child component for rendering.

HOW TO USE SLOT In the child component where the content is to be displayed, add the slot tag as follows:

<slot></slot>

In this tutorial, we will generate our project with the Vue CLI 

vue create slot-project

In the src folder create a components folder with parent.vue and child.vue files

Adding the code below to child.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
            </div>
        </div>
    </div>
</template>


<script>


    export default {
        
    }
</script>


<style>
</style>

Add the code snippet below to parent.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Parent</h2>
               <child-component>
                    <h3 class="child-content">You are my first child</h3>
                    <h4 class="child-content">Your name is Tom</h4>
               </child-component>
            </div>
        </div>
    </div>
</template>

<script>
import child from './child.vue'
    export default {
        components: {
            child-component: child
        }
    }
</script>


<style>
</style>

Add the code snippet below to parent.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Parent</h2>
               <child-component>
                    <h3 class="child-content">You are my first child</h3>
                    <h4 class="child-content">Your name is Tom</h4>
               </child-component>
            </div>
        </div>
    </div>
</template>


<script>
import child from './child.vue'
    export default {
        components: {
            child-component: child
        }
    }
</script>


<style>
</style>

Here we imported the child component and passed down the HTML content to the child.

For these contents to be displayed in the child component, the slot tag must be added to the child component.

Let’s add the slot tag to the child.vue file as follows:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
               <slot></slot>
            </div>
        </div>
    </div>
</template>


<script>


    export default {
        
    }
</script>


<style>
</style>

In the app.js file add the parent.vue component

<template>
    <div class="app">
        <Parent/>
    </div>
</template>


<script>
import Parent from './components/Parent'
    export default {
      components: {
          Parent
      }  
    }
</script>


<style>
</style>

Now, we can verify that the slot is working as expected.

npm run serve

Now our app should be like this:

STYLING SLOT  COMPONENT

For styling our slot component, the CSS styles should be added with the slot tag.

So in child.vue component we will add the following styles to the HTML content received from the parent.vue component.

<style>
.child-content {
    background-color: blue;
    color: red;
}
</style>

Using Multiple Slots

To use multiple slots in vue, vuejs provides us with a way to name our slots.

What if we want the h2 and h3 tags in the parent component to be displayed individually in separate slots. This would be a typical use case for named slots.

In the Parent.vue component we will name our slots as follows:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Parent</h2>
               <child-component>
                    <h3 class="child-content" slot="message">You are my first child</h3>
                    <h4 class="child-content" slot="name">Your name is Tom</h4>
               </child-component>
            </div>
        </div>
    </div>
</template>

In the child.vue component we will receive the named slot as follows:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
               <slot name="message"></slot>
               <slot name="name"></slot>
            </div>
        </div>
    </div>
</template>

Here vuejs reserves two slots to display the content of the slot attribute with the value of message and name as separate contents.

Vue Templates

If you are looking for VueJs Admin Dashboard Template then you can check out below useful Admin Template which can save you time, money, and energy:

Modernize Free Vuetify + Vue js Admin Dashboard

Conclusion

In this article, we have seen a practical use case of vue slots to transfer content from a parent component to a child component.

Related Article: The Ultimate Vue Cheat Sheet | Vue 3 & 2