• How I finally got my head around Scoped Slots in Vue
  • By Ross Coundon
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: shixi – li
  • Proofreader: brilliantGuo, Xionglong58

Vue is a front-end framework for building Web applications, designed in such a way that developers can increase their productivity very quickly. There is a lot of information on all aspects of the framework, and its community is growing every day. If you’re reading this, you probably already know.

While we can get it up and running quickly and directly, the more complex and powerful parts of the framework require a lot of thought (at least for me). One of them is the slot, and another related but not quite the same is the scope slot. It took me a while to understand how slots work, so I thought it would be worth sharing my understanding of slots because it might help others.

Slots and named slots

The parent component passes information to the child component in a different way than through the normal Props attribute passing mechanism. I find it helpful to relate this approach to regular HTML elements.

Like HTML tags.

< a href = "/ sometarget">This is a link</a>
Copy the code

If This is in a Vue environment and <a> is your component, then you need to send “This is a link” message to the “A” component, which will be rendered as a hyperlink, and “This is a link” will be the text of the link.

Let’s define a child component to show how it works:

<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>
Copy the code

Then in the parent component we do this:

<template>  
  <div>  
    <child-component>This is from outside</child-component>  
  </div>  
</template>
Copy the code

The screen should behave as you would expect with “This is from outside”, but This is rendered by a child component.

We can also add default information to the child components so that nothing is passed in here, like this:

<template>  
  <div>  
    <slot>Some default message</slot>  
  </div>  
</template>
Copy the code

Then if we create our child component like this:

<child-component>  
</child-component>
Copy the code

We can see that “Some Default message” appears on the screen.

Named slots are very similar to regular slots, the only difference being that you can pass your text in multiple places in your target component.

Let’s upgrade the child component to have multiple named slots

<template>  
  <div>  
    <slot>Some default message</slot>  
    <br/>  
    <slot name="top"></slot>  
    <br/>  
    <slot name="bottom"></slot>  
  </div>  
</template>
Copy the code

Thus, we have three slots in our child component. The top and bottom slots are named slots.

Let’s update the parent component to use it.

<child-component v-slot:top>  
Hello there!  
</child-component>
Copy the code

Note – we use the new Vue 2.6 syntax here to specify which slot we want to locate: ‘V-slot :theName’.

What do you think you’ll see on the screen now? If you say “Hello Top! Then you are only partly right.

Since I didn’t assign any value to the unnamed slot, we’ll get the default value as well. So what we’re really going to see is:

Some default message

Hello There!

Slots that are not actually named are treated as’ default ‘, so you can also do this:

<child-component v-slot:default>  
Hello There!  
</child-component>
Copy the code

Now we’ll just see:

Hello There!

Since we have already provided a value for the default (i.e., unnamed) slot, neither the named slot ‘top’ nor ‘bottom’ has a default value.

You don’t have to send just text, you can send other components or HTML. You can send anything you want.

Scope slot

I think slots and named slots are relatively easy to master once you play with them a little bit. Scoped slots, on the other hand, have similar names but are somewhat different.

I tend to think of the scope slot as a bit like a projector (or a projector for my European friends). Here’s why.

A scope slot in a child component can provide data for the display of a slot in a parent component. It’s like a person with a projector standing inside your child component and lighting up some images on the parent component’s wall.

Here’s an example. In the child component we set up a slot like this:

<template>  
  <div>  
    <slot name="top" :myUser="user"></slot>  
    <br/>  
    <slot name="bottom"></slot>  
    <br/>  
  </div>  
</template>

<script>

data() {  
  return {  
    user: "Ross"  
  }  
}

</script>
Copy the code

Notice that our named slot ‘top’ now has a property named ‘myUser’, and then we bind a dynamic value in ‘user’.

In our parent component we set the child component like this:

<div>  
   <child-component v-slot:top="slotProps">{{ slotProps }}</child-component>  
</div>
Copy the code

This is what we see on the screen:

{ “myUser”: “Ross” }

Again using the projector analogy, our child component passes the value of its user string to the parent component via the myUser object. The wall that it projects onto the parent component is called ‘slotProps’.

I know it’s not a perfect analogy, but when I first tried to understand the mechanism, it helped me think this way.

The documentation for Vue is excellent, and I’ve seen some other explanations of how scoped slots work. But the approach many people seem to take is to name all or some of the properties in the parent component the same as the child component, which I think makes the data hard to track.

Using ES6 deconstruction in the parent component, we can also unplug a specific User object from the slot property (whatever you want to call it) by writing it this way:

<child-component v-slot:top="{myUser}">{{ myUser }}</child-component>
Copy the code

Or even just give it a new name in the parent component:

<child-component v-slot:top="{myUser: aFancyName}">{{ aFancyName }}</child-component>
Copy the code

Everything is deconstructed through ES6 and has nothing to do with Vue itself.

If you’re starting out with Vue and slots, hopefully this will get you started and solve some tricky problems.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.