Passing data to your component – slots

There are times when you may need to pass chunks of HTML to your component that are not stored in a property or that you want to format before appearing in the component. Rather than trying to pre-format in a computed variable or similar, you can use slots with your component. 

Slots are like placeholders and allow you to place content between the opening and closing tags of your component and determine where they are going to display. 

A perfect example of this would be a modal window. These normally have several tags and often consist of a lot of HTML to copy and paste if you wish to use it in your application multiple times. Instead, you can create a modal-window component and pass your HTML with a slot.

Create a new component titled modal-window. This accepts one prop of visible, which accepts a Boolean value and is false by default. For the template, we'll use the HTML from the Bootstrap modal as a good example of how a component using slots can easily simplify your application. To ensure the component is styled, make sure you include the bootstrap asset files in your document:

      Vue.component('modal-window', {
        template: `<p class="modal fade">
          <p class="modal-dialog" role="document">
            <p class="modal-content">
              <p class="modal-header">
               <button type="button" class="close" 
               data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
              </button>
             </p>
          <p class="modal-body">
          </p>
           <p class="modal-footer">
            <button type="button" class="btn btn-  
             primary">Save changes</button>
            <button type="button" class="btn btn-      
             secondary" data-dismiss="modal">Close
            </button>
            </p>
          </p>
         </p>
      </p>`,

      props: {
        visible: {
          type: Boolean,
          default: false
        }
       }
    });

We will be using the visible prop to determine whether the modal window is open or not. Add a v-show attribute to your outer container that accepts the visible variable:

      Vue.component('modal-window', {
          template: `<p class="modal fade" v-
            show="visible">
          ...
        </p>`,

        props: {
          visible: {
            type: Boolean,
            default: false
          }
        }
      });

Add your modal-window component to the app, specifying visible to be true for now, so we can understand and see what is going on:

      <modal-window :visible="true"></modal-window>

We now need to pass some data to our modal box. Add a heading and some paragraphs between the two tags:

      <modal-window :visible="true">
        <h1>Modal Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur                
         adipiscing elit. Suspendisse ut rutrum ante, a          
         ultrices felis. Quisque sodales diam non mi            
         blandit dapibus. </p>
         <p>Lorem ipsum dolor sit amet, consectetur             
          adipiscing elit. Suspendisse ut rutrum ante, a             
          ultrices felis. Quisque sodales diam non mi             
          blandit dapibus. </p>
       </modal-window>

Pressing refresh in the browser won't do anything, as we need to tell the component what to do with the data. Inside your template, add a <slot></slot> HTML tag where you want your content to appear. Add it to the p with the modal-body class:

      Vue.component('modal-window', {
        template: `<p class="modal fade" v-      
        show="visible">
          <p class="modal-dialog" role="document">
            <p class="modal-content">
              <p class="modal-header">
          <button type="button" class="close" data-              
              dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
              </p>
              <p class="modal-body">
                <slot></slot>
              </p>
              <p class="modal-footer">
              <button type="button" class="btn btn-  
             primary">Save changes</button>
             <button type="button" class="btn btn-                   
               secondary" data-
            dismiss="modal">Close</button>
           </p>
           </p>
        </p>
        </p>`,

         props: {
          visible: {
            type: Boolean,
            default: false
          }
        }
      });

Viewing your app will now reveal the content you passed in inside the modal window. Already, the app is looking cleaner with this new component.

Viewing the Bootstrap HTML, we can see there is space for a header, body, and footer. We can identify these sections with named slots. This allows us to pass specific content to specific areas of our component.

Create two new <slot> tags in the header and footer of the modal window. Give these new ones a name attribute, but leave the existing one empty:

      template: `<p class="modal fade" v-              
      show="visible">
        <p class="modal-dialog" role="document">
          <p class="modal-content">
            <p class="modal-header">
              <slot name="header"></slot>
              <button type="button" class="close" data-
               dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
             </button>
          </p>
           <p class="modal-body">
            <slot></slot>
          </p>
          <p class="modal-footer">
            <slot name="footer"></slot>
            <button type="button" class="btn btn-  
            primary">Save changes</button>
            <button type="button" class="btn btn-
           secondary" data-
           dismiss="modal">Close</button>
           </p>
        </p>
       </p>
     </p>`,

In our app, we can now specify what content goes where by specifying a slot attribute in the HTML. This can either go on a specific tag or a container around several tags. Any HTML without a slot attribute will also default to your unnamed slot:

      <modal-window :visible="true">
        <h1 slot="header">Modal Title</h1>
  
        <p>Lorem ipsum dolor sit amet, consectetur             
        adipiscing elit. Suspendisse ut rutrum ante, a 
        ultrices felis. Quisque sodales diam non mi 
         blandit dapibus. </p>

        <p slot="footer">Lorem ipsum dolor sit amet,            
         consectetur adipiscing elit. Suspendisse ut 
         rutrum ante, a ultrices felis. Quisque sodales 
           diam non mi blandit dapibus. </p>
      </modal-window>

We can now specify and direct our content to specific places.

The last thing you can do with slots is specified a default value. For example, you may want to display the buttons in the footer most of the time, but want to have the ability to replace them if desired. With a <slot>, any content placed between the tags will be displayed unless overwritten when specifying the component in your app.

Create a new slot titled buttons,  and place the buttons in the footer inside. Try replacing them with some other content.

The template becomes:

      template: `<p class="modal fade" v-
      show="visible">
        <p class="modal-dialog" role="document">
          <p class="modal-content">
            <p class="modal-header">
              <slot name="header"></slot>
              <button type="button" class="close" data-
              dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </p>
            <p class="modal-body">
              <slot></slot>
            </p>
            <p class="modal-footer">
              <slot name="footer"></slot>
              <slot name="buttons">
                <button type="button" class="btn btn-
                 primary">Save changes</button>
                <button type="button" class="btn btn-
                 secondary" data-
                 dismiss="modal">Close</button>
              </slot>
            </p>
          </p>
        </p>
      </p>`,

And the HTML:

     <modal-window :visible="true">
     <h1 slot="header">Modal Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Suspendisse ut rutrum ante, a 
      ultrices felis. Quisque sodales diam non mi blandit 
      dapibus. </p>

        <p slot="footer">Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit. Suspendisse ut rutrum 
       ante, a ultrices felis. Quisque sodales diam non mi 
       blandit dapibus. </p>

        <p slot="buttons">
          <button type="button" class="btn btn-      
           primary">Ok</button>
        </p>
       </modal-window>

Although we won't be utilizing slots with our people listing app, it's good to be aware of the capabilities of a Vue component. If you wished to use a modal box like this, you can set the visibility to a variable that is false by default. You can then add a button with a click method that changes the variable from false to true—displaying the modal box.