What are slots and how do they work and "scoped slots" in Vue.js?

Asked

Viewed 1,055 times

7

In Vue.js we can pass descendants to a component in the following way:

<meu-componente>
    <div>Um descendente</div>
    <div>Outro descendente</div>
</meu-componente>

How this works and what is the relationship with <slot></slot> and scoped slots to receive offspring from another component and pass props to the descending elements?

A slot may have initial offspring which is replaced by future offspring if there is no need to use a v-if or v-show?

How to know which content should go to which slot in case a component has multiple?

javascript vue.js

2 answers

7


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

When a component has a slot(s), it is possible to inject content into it from the parent component without having to 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>

<div id="app">
  <meu-componente>
    {{ message }}
  </meu-componente>
</div>

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

How to know which content should go to which slot in case a component has multiple?

You can use multiple slots by simply giving a name attribute to each, and passing the content on an HTML tag with attribute slot pointing to that name. In the component definition it looks like this, 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>

A slot can have initial offspring that is replaced by future offspring if there is one without having to use a v-if or v-show?

Yes! If you do not pass content to a particular slot from the external component, the slot content defined in the internal component will be displayed. Acts as a content default.

5

Vue.js slots is especially for you to insert extra html into 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 html part, 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 to make slots is precisely for the content awaited by the component to be according to the scope of each situation, that is, the component will not have a fixed content forever, it will receive pieces of content via slot and will be placed inside 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>

This way you prepare the component to receive content organically and with possible pre-configured formatting. I hope I’ve helped!

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.