CODEWITHSUNDEEP
javascriptvue.jsvue-component
mlst
mlst

Reputation: 3471

What exactly is scoped slot in VueJS?

I am trying to figure out the definition of the scoped slots, but in VueJS docs they do not give definition per-se, but rather try to explain it by example. So my question is what exactly is scoped slot? Is that just ordinary slot that has slot props passed to it from the component?

Also, are "scoped slots" mutually exclusive with "named slots". In other words, can we have slot that is both named and scoped, eg. "named scoped slot"?

In addition I have one more related question. When writing code, on what thing exactly we mean when we say "slot"? Is term "slot" meant to be the actual <slot></slot> tag in component's template (eg. let's call component that defines this template navigation-link) like here:

<template>
    <a v-bind:href="url">
      <slot></slot> // is this "slot"?
    </a>
</template>

Or is term "slot" the actual HTML content we put in parent component when using this navigation-link like this:

<navigation-link url="/profile">
    <span class="link-text">Your Profile</span>  // or is this HTML content what we call a "slot"?
</navigation-link>

Upvotes: 1

Views: 984

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37923

  1. what thing exactly we mean when we say "slot"?

<slot></slot> - because by this the component declares "this is the place (and it's default content) where parent can place it's own content". Correct name for parent's counterpart is probably "slot content"

  1. What is slot?

Slot is a construct that allows some part of the component's content to be defined/replaced by the parent component...

  1. Normal slot

The slot that receives content that is completely static or only depends on the data of the parent.

From the component's point of view, it is like receiving static HTML (array of VNodes in Vue)

  1. scoped slot

Slot that receives the content which can be completely static, generated using parent's data or some component's internal data (components decides which data makes available)

Content passed from the parent is not static. It is a function created when parent's template is compiled. When the component (where the slot is defined) is rendering, it will call that function, pass it some data (internal to that component) and the function returns some HTML (again, array of VNodes in Vue)

This may look like a very small difference but in reality this makes scoped slots much more useful than normal slots. Lets say you are making a DataGrid component. Only because of scoped slots you can create a slot responsible for rendering single row - template of how each and every row should look like. This slot content is transformed into a function and the component can call that function for every item in the input array (passing "current row" item as a slot prop) and use the result as a representation for the row.

  1. can we have slot that is both named and scoped, eg. "named scoped slot"?

Easiest way to look at it is that all slots are named but in some cases Vue allows us to leave out the slot name and assigns it slot name "default"

Upvotes: 3

Related Questions