What are slots and "scoped slots" in Vue.js?

  

How does <slot></slot> and scoped slots work to receive descent from another component and pass props to descending elements?

When a component has a slot (s), it can inject content into it from the parent component, without the need to use props . For example:

var MeuComponente = Vue.component('meu-componente', {
    template: '<div class="meu-componente"><h1>{{ header }}</h1><slot></slot></div>',
    data() { return { header: 'Isto vem de dentro' } }
});

new Vue({
  el: '#app',
  data: {
    message: 'Isto vem de fora'
  }
});

<script src="https://unpkg.com/vue"></script><divid="app">
  <meu-componente>
    {{ message }}
  </meu-componente>
</div>

Notice that message belongs to the outside component (the root / app of Vue, in this case), while the header renders the value of an internal variable to the component.

  

How to know what content should go to that slot in case one component has multiple?

You can use multiple slots simply by giving a name attribute to each, and passing the content into an HTML tag with the slot attribute pointing to that name. In the definition of the component is thus, for example:

<h1>{{ header }}</h1>
<slot name="abaixo-do-h1"></slot>
<h2>Outro header</h2>
<slot name="abaixo-do-h2"></slot>

In use it looks like this:

<meu-componente>
    <div slot="abaixo-do-h1>Isto vai abaixo do h1</div>
    <div slot="abaixo-do-h2>Isto vai abaixo do h2</div>
</meu-componente>

  

Can a slot have initial offspring that is replaced by future offspring if there is no v-if or v-show to use?

Yes! If you do not pass a content to a particular slot from the external component, the contents of the slot defined in the built-in component will be displayed. It works as a default content.

Vue.js slots is especially for you to insert extra html within the component

Example:

This is the creation of a component with slots, in the following example you have a complete modal structure to be opened and closed depending on the action received via props (in the example I show only the part of html, beauty)

let modal = '

    <div class="modal">

    <div class="modal-header">
        <slot name="heade"></slot>
    </div>

    <div class="modal-content">
        <slot name="content"></slot>
    </div>

    <div class="modal-action">
        <slot name="action"></slot>
    </div>

</div>

'

The reason for making slots is precisely for the content expected by the component to be according to the scope of each situation, that is, the component will not have fixed content forever, it will receive pieces of content via slot and will be placed inside of the slot in order

Assigning content to slot:

<modal>

    <div slot="header">
        <!--todo conteudo header aqui-->
    </div>

    <div slot="content">
        <!--todo conteudo content aqui-->
    </div>

    <div slot="action">
        <!--todo conteudo action aqui-->
    </div>

</modal>

In this way you prepare the component to receive content in an organized way and with possible preconfigured formatting. I hope I have helped!