Basic Understanding Of Slots In Vue.js

  • 02-06-2022
  • 574
  • Vue
  • Haresh Chauhan

What is Slot?

Slots are one type of reserved space that is offered by vuejs. It will be content passed from one component to another component.

We can bifurcate in two type of slots in vuejs.

1. Named Slot.

We can define the name of the slot name="slot-name".

2. Unnamed Slot.

The default slot used in vuejs is an unnamed slot that will collect whole content from inside the components and pass it to the main original component.

Slot here uses to distribute our content from one component to another component and reduce and reuse of the code and create reusable widgets.

The slot will pass the content to the child component and share the content.

Using propos you can pass String,Object,Array and functions from the parent components to the child component. But while possible to pass HTML from a parent component to a child as a string that time slot will help you to cross it.

So vuejs Slots is more reliable and secure to pass HTML element and other conente from parent to it's child component.

In this post, some examples are given, How to use slot in vuejs with demo code example. Please follow the code.

Example 1: Simple Slot Or Unnamed Slot

This component is my child component just for understanding purposes. You can see i used it Slot tag three time. It will print inside the FormComponent three-time whatever content is available in the slot.

src/components/FormComponent.vue

<template>
  <div class="container mt-5">
    <slot></slot> // Simple slot from app.vue
    <hr>
    <slot></slot> // Simple slot from app.vue
    <hr>
    <slot></slot> // Simple slot from app.vue
  </div>
</template>

<script>

export default {
        
  name:'FormComponent',

    data(){

      return {
            
      }
    },
}
</script>

<style scoped>
    
</style>

From App component i am passing HTML element in form-component which is h1, p, span tags.

These three tags will pass to its child component (FormComponent) and there will print through the Slot.

src/App.vue

<template>
  <div id="app">
    <form-component>
      <h1>This is an simple slot</h1>
      <p>This is Paragraph</p>
      <span class="text-danger">This is slot</span>
    </form-component>
  </div>
</template>

<script>

import FormComponent from './components/FormComponent'

export default {
  name: 'App',
  components: {
    FormComponent
  }
}
</script>

<style scoped>

</style>

Example Output :

image

Example 2: Named Slot

In this example i have given slot name in side the Slot tag.

First slot name I given title slot, Second slot name I given paragraph slot and Third slot name given span-text.

This slot content will be imported by its parent component.

src/components/FormComponent.vue

<template>
  <div class="container mt-5">

    <slot name="title"></slot> // title slot form app.vue
    <hr>

    <slot name="paragraph"></slot> // paragraph slot form app.vue
    <hr>

    <slot name="span-text"></slot> // span-text slot form app.vue
    <hr>

  </div>
</template>

<script>

export default {
 
 name:'FormComponent',

 data(){
    return {
     
    }
  },
}
</script>

<style scoped>

</style>

This parent component inside form-component passed content h1, p, span tages.

First h1 tag I have given slot name title, Second p tag I given slot name is a paragraph and third one span tag given name span-text.

This all content will print in its child component (FormComponent) Where you will define a slot name which you have given in this example.

src/App.vue

<template>
  <div id="app">
    <form-component>
        // define slote name title
        <h1 slot="title">{{ title }}</h1> 

        // define slote name paragraph
        <p slot="paragraph">This is Paragraph</p>

        // define slote name span-text
        <span slot="span-text" class="text-danger">This is slot</span> 
    </form-component>
  </div>
</template>
  
<script>
  
import FormComponent from './components/FormComponent'
  
export default {
  name: 'App',
  components: {
    FormComponent
  },

  data(){
    return {
      title: 'This is an simple slot'
    }
  }
}
</script>
  
<style scoped>
  
</style>

Example Output :

image

Example 3: Useful Form Example

In this example, I have taken the full example of the form. First, I gave some slot names, The First slot is form-title all the content from its parent component where you define form-title slot name that all the content will be printed in first div tag with the given name.

As same as in the second slot named with form-fied in this slot I passed all input fields for the form from its' parent component.

AS it is in the third component slot named with form-button passed HTML button element from it's parent compoent.

src/components/FormComponent.vue

<template>
  <div class="container mt-5">
    <h3>User Registration Form Fill...</h3>

    <form action="">

      <div class="form-title bg-light p-2">
        <slot name="form-title"></slot>
      </div>

      <div class="form-field">
        <slot name="form-field"></slot>
      </div>

      <div class="form-group">
        <slot name="form-button"></slot>
      </div>
      
    </form>

    <br>
    <ul class="useful-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Register</a></li>
    </ul>
  </div>
</template>

<script>

export default {
    
  name:'FormComponent',

  data(){
    return {
        
    }
  },
}
</script>

<style scoped>

</style>

In side the from-compoent the first div tag with the slot name form-title form here it's all this slot HTML content will pass to its child component where i slot name form-title and will print it.

form-field in this div the tag will be passed to its child component and add this All inputs in the child (FormComponent).

As it is in third div slot named with form-button this button HTML content will pass to its child component.

src/App.vue

<template>
  <div id="app">
    <form-component>
        
        <div slot="form-title">
          <h3>This is form title</h3>
          <small>Please fill all field.</small>
        </div>
        
        <div slot="form-field">
          <label for="name">Name:</label>
          <input class="form-control" type="text" name="name" id="name">
          <br>
          <label for="email">Email:</label>
          <input class="form-control" type="email" name="email" id="email">
          <br>
          <label for="password">Password:</label>
          <input class="form-control" type="password" name="password" id="password">
        </div>

        <div slot="form-button">
          <button class="form mt-2 btn btn-success">Submit</button>
        </div>

    </form-component>
  </div>
</template>
  
<script>
  
import FormComponent from './components/FormComponent'
  
export default {

  name: 'App',

  components: {
    FormComponent
  }
}
</script>
  
<style scoped>
  
</style>

Example Output :

image

We hope you understand how slots working in vuejs.

Thanks for reading out post.


We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :