Vue 2.6.6 Release part2 new v-slot syntax
Tags: vue, vslot, scopedslot
Published: 2019-03-22 09:41:39

---
title: Vue 2.6.6 Release part2 new v-slot syntax
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jqj8tl0x8mahvmhcjvh6.jpeg
description: v-slot and scoped slot new syntax
series: Vue 2.6.6 Release
tags: vue, v-slot, scoped-slot
---

As I am saying in my last [article](https://dev.to/f3ltron/vue-266-release-part1-23b4) we will take a simple example and try to reproduce the behavior of the awesome vue-promise component [HERE](https://github.com/posva/vue-promised) made by Posva.

What do we want to achieve here ?

1) create a component Promise
2) it should display loading when pending
3) It should display error when error. Here we will need a scoped slot for displaying the error.message
4) Show data when it's loaded without error

💪 🤘Don't run away !!! :smile:

**At any moment you can see the final codes:**
- [OLD SLOT](https://codesandbox.io/s/github/f3ltron/simple-vue-promise-old/tree/master/)
- [NEW SLOT](https://github.com/f3ltron/simple-vue-promise.git)

# Old slot and slot-scope

```vuejs
// App.vue
<template>
  <div>
    <PromiseComponent :promise="childrenPromise">
      <span slot="pending">Loading... !</span>

      <template slot-scope="{ data }">
        <ul>
          <element v-for="name in data" :key="name"> {{ name }} </element>
        </ul>
      </template>

      <p slot="rejected" slot-scope="{ error }">{{ error.message }}</p>
    </PromiseComponent>
  </div>
</template>
```

# New Slot Scoped slot Syntax


```vuejs
// App.vue
<template>
  <div>
    <PromiseComponent :promise="childrenPromise">
      <template #pending>
        <span >Loading... !</span>
      </template>

      <template #default="{data}">
        <ul>
          <Element v-for="name in data" :key="name">
            {{ name }}
          </Element>
        </ul>
      </template> 

      <template #rejected="{error}">
        <p>Error... :( : {{ error.message }}</p>
      </template>
    </PromiseComponent>
  </div>
</template>
```

they both have same subFiles: 


```vuejs
// /components/Promise.vue
<template>
  <div>
    <slot v-if="isLoading" name="pending" :isLoading="isLoading"></slot>
    <slot v-if="!isLoading" name="default" :data="data"></slot>
    <slot v-if="error" name="rejected" :error="error"></slot>
  </div>
</template>

```

**PS: I have put here the most important files. If you want to check more go to :**
- [OLD SLOT](https://codesandbox.io/s/github/f3ltron/simple-vue-promise-old/tree/master/)
- [NEW SLOT](https://github.com/f3ltron/simple-vue-promise.git)


Yeah it's a lot of codes ! But it's ok trust me :smile:

For the old syntax i showed you how differently you can write them. It is a basic example without a lot of nested components... And for me it seems to be messy..

Sometimes with this syntax scoped slots can be really weird because you can't know where slotProps come from. What I dislike too is that you have to write two directives slot and slot-scope. 

It worked well before but it can be better ! :smile:

In the new syntax they finally decided to regroup them into one directive. v-slot.

**IMPORTANT 1: You need to know v-slot can only be used in `<component />` or `<template/>` html tag. It canno't be use in `<p>` by example**


I like the idea of regrouping all in one v-slot:default

(#default is the shorthand for v-slot:default)

```jsx
#:[slotNAme]=[slotPros]
```

Last thing i like a lot is the performance improvement !

For now according to [EvanYou](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e) 
> Normal slots are rendered during the parent’s render cycle. When a dependency of a slot changes, it causes both the parent and child components to re-render

What it mean ? 

[CHECK HERE](https://codesandbox.io/s/2olpjzkmkj)

As you can see when you open the console. Even if you update a data in parent or in a children slot it update the normal scope. This is the performance issue point by Evan you.

But wait ... The slot scope didn't update !?

Yes. According to Evan you

> Scoped slots, on the other hand, are compiled into inline functions and called during the child component’s render cycle. This means any data dependencies relied on by a scoped slot are collected by the child component, resulting in more precise updates

So here it will update when his children will update and not with his parents !

*All slots using the new v-slot syntax are compiled into scoped slots*. So with the new syntax you just don't have to think about the performance issue. It is done by default :clap: :clap: :clap:

Thanks for reading :).

If you want to follow me or know about what i am actually working on! 

- [My Twitter](https://twitter.com/giraud_florent)
- [My actuall work](https://f3ltron.github.io/vuepress-component-docgen/)
- [My github](https://github.com/f3ltron)
- [My enterprise](https://www.atecna.fr)


**PS**: If you want to check more about release [COME HERE](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e)