12). Vue JS - Slots

<slot> basically use for element to serve as distribution outlets for content.

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.

Slots basically used for creating Generic components (button, Card, Modal),
layout (App, Header, Footer), Recursive component (Tree, Menu).

For Example JS Fiddler Here

We have create one component app-child. And we add slot tag and 

fixed content which always display. But slot content is dynamically 

what we give it will display.

<div id="app">

  <h2>We can use slots to populate content</h2>

  <app-child>

    <h3>This is slot number one</h3>

  </app-child>

  <app-child>

    <h3>This is slot number two</h3>

    <small>I can put more info in, too!</small>

  </app-child>

</div>

<script type="text/x-template" id="childarea">

  <div class="child">

    <slot></slot>

    <p>It's a veritable slot machine!</p>

  </div>

</script>

const Child = {

  template: '#childarea'

};

new Vue({

  el: '#app',

  components: {

    appChild: Child

  }

});

Output will be

This is slot number one

It's a veritable slot machine!

This is slot number two

I can put more info in, too!

It's a veritable slot machine!

You can also have named slots. 

If you were to have two slots in a component,

you could differentiate between them by adding a name 

attribute <slot name="header"></slot>