Detailed explanation of scope slots in Vue.js

Scope slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they're hard to understand! Trying to wrap your head around parent and child ranges is like solving a tricky math equation.

When you can't understand something easily, a good approach is to try to use it to solve the problem. In this article, I'll demonstrate how to use scoped slots to build a reusable list component.

Basic components

The component we are going to build is called my-list and it shows a lot thing. What's special about this feature is that you can customize how the list items are rendered each time the component is used.

Let's deal with the simplest use case first and get my-list to render a list: an array of geometry shape names and their number of sides.

app.js

Vue.component('my-list', {
  template: '#my-list',
  data() {
    return {
      title: 'Shapes',
      shapes: [ 
        { name: 'Square', sides: 4 }, 
        { name: 'Hexagon', sides: 6 }, 
        { name: 'Triangle', sides: 3 }
      ]
    };
  }
});

new Vue({
  el: '#app'
});

index.html

<div id="app">
  <my-list></my-list></div><script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div class="list-item" v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>

After adding a little CSS, it will look like the following picture:

Generalize my-list

Now, we want to make my-list versatile enough to render any kind of list. The second test case will be a list of colors, including a small sample showing the colors.

To do this, we must abstract any data specific to the shape list. Since items in a list may be structured differently, we will provide my-list with a slot so that the parent list can define how any particular list is displayed.

app.js

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title' ]
});

index.html

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <slot></slot>
    </div>
  </div>
</script>

Now let us create two instances of my-list component in the root instance to display our two test cases List:

app.js

new Vue({
  el: '#app',
  data: {
    shapes: [ 
      { name: 'Square', sides: 4 }, 
      { name: 'Hexagon', sides: 6 }, 
      { name: 'Triangle', sides: 3 }
    ],
    colors: [
      { name: 'Yellow', hex: '#F4D03F', },
      { name: 'Green', hex: '#229954' },
      { name: 'Purple', hex: '#9B59B6' }
    ]
  }
});

<div id="app">
  <my-list :title="Shapes">
    <div class="list-item" v-for="item in shapes">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </div>
  </my-list>
  <my-list :title="Colors">
    <div class="list-item" v-for="color in colors">
      <div>
        <div class="swatch" :style="{ background: color.hex }"></div>
        {{ color.name }}      </div>
    </div>
  </my-list></div>

Like this:

##Surface components

The code we just created works fine, but the code isn't great. my-list is a component that displays a list by name. But we've abstracted away all the logic of rendering the list into the parent list. The component just wraps the list with some presentation markup.

##Considering that there are still duplicate codes in the two declarations of the component (for example

<div>
  <slot my-prop="Hello from child"></slot>
</div>

<child>
  <template scope="props">
    <span>Hello from parent</span>
    <span>{{ props.my-prop }}</span>
  </template>
</child>

<div>
  <span>Hello from parent</span>
  <span>Hello from child</span>
</div>

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <!--template will go here-->
  </my-list>
  <my-list title="Colors" :items="colors">
    <!--template will go here-->
  </my-list>   
</div>

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title', 'items' ]
});

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div v-for="item in items">
        <slot v-bind="item"></slot>
      </div>
    </div>
  </div>
</script>

<my-list title="Shapes" :items="shapes">
  <template scope="shape">
    <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
  </template>
</my-list>

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <template scope="shape">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </template>
  </my-list>
  <my-list title="Colors" :items="colors">
    <template scope="color">
      <div>
        <div class="swatch" :style="{ background: color.hex }"></div>
        {{ color.name }}
      </div>
    </template>
  </my-list>   
</div>