In-depth understanding of slot and slot-scope in VUE

Author/Yun Huang cups pour

Writing in the front

Vue documentation about the slot is very short, in the language and writing is concise, coupled with its and the methods of data, such as computed commonly used options for use in frequency of use, has the difference, this could cause a first-time slot developers to “forget it, learn to back, anyway have been able to write basic components” idea, The documentation for vue is closed.

In fact, the concept of a slot is very simple and is explained in three parts. These three sections are also written in the order of the VUE documentation.

Before we get into these three parts, let those of you who have not yet worked with slots have a simple idea of what a slot is: a slot, or slot, is a piece of HTML template for a component that the parent component decides whether or not to display and how to display it. In fact, the two core issues of a slot are highlighted here: whether to display and how to display.

A slot is a template. Therefore, any component can be classified into two types: non-slot template and slot template. Non-slot templates refer to HTML templates such as’ DIV, SPAN, UL, table ‘. The display, hiding and display of non-slot templates are controlled by the component itself. The slot template is slot, which is an empty shell because the parent component controls what it shows and hides, and what HTML template it displays at the end. However, the slot location is determined by the child component itself. The template passed by the parent component will be displayed wherever slot is written to the component template.

A single slot default slot | | anonymous slot

The first is a single slot. A single slot is the official name for a VUE, but it can also be called a default slot, or as opposed to a named slot, we can call it an anonymous slot. Because it doesn’t set the name property.

A single slot can be placed anywhere in a component, but as the name suggests, there can only be one such slot in a component. Correspondingly, there can be many named slots, as long as the name attribute is different.

Here’s an example.

The parent component:

<template>
    <div class="father"> <h3> Here is the parent component </h3> <child> <div class="tmpl"Menu > < span > 1 < / span > < span > menu 2 < / span > < span > menu 3 < / span > < span > menu 4 < / span > < span > menu 5 < / span > < span > menu 6 < / span > < / div > < / child > </div> </template>Copy the code

Child components:

<template>
    <div class="child"Child components > < h3 > here < / h3 > < slot > < / slot > < / div > < / template >Copy the code

In this example, because the parent component writes the HTML template inside, the child component’s anonymous slot template looks like this. That is, the anonymous slot of the child component is used by the template below.

<div class="tmpl"Menu > < span > 1 < / span > < span > menu 2 < / span > < span > menu 3 < / span > < span > menu 4 < / span > < span > menu 5 < / span > < span > menu 6 < / span > < / div >Copy the code

The final render looks like this:

Note: All demos are styled for easy observation. The parent component is filled with a gray background and the children are filled with a light blue color.Copy the code

A named slot

An anonymous slot does not have a name attribute, so it is an anonymous slot. After the name attribute is added to the slot, it becomes a named slot. Named slots can appear N times in a component, in different locations. Here is an example of a component with two named slots and a single slot. The three slots are represented by the parent component using the same SET of CSS styles, but with slightly different contents.

The parent component:

<template>
  <div class="father"> <h3> Here is the parent component </h3> <child> <div class="tmpl" slot="up"Menu > < span > 1 < / span > < span > menu 2 < / span > < span > menu 3 < / span > < span > menu 4 < / span > < span > menu 5 < / span > < span > menu 6 < / span > < / div > < div class="tmpl" slot="down"Menu > < span > 1 < / span > < span > menu - 2 < / span > < span > menu - 3 < / span > < span > menu - 4 < / span > < span > menu - 5 < / span > < span > menu - 6 < / span > < / div > <div class="tmpl"> < span > menu - > 1 < / span > < span > menu - > 2 < / span > < span > menu - > 3 < / span > < span > menu - > 4 < / span > < span > menu - > 5 < / span > < span > menu - > 6 < / span > </div> </child> </div> </template>Copy the code

Child components:

<template>
  <div class="child"> // Named slot <slot name="up"></slot> <h3> here is the subcomponent </h3> // named slot <slot name="down"></slot> // Anonymous slot <slot></slot> </div> </template>Copy the code

The display result is shown as follows:

As you can see, the parent component associates the named slot with the slot attribute on the HTML template. HTML templates without slot attributes are associated with anonymous slots by default.

Scope slot | slot with data

Finally, there is our scope slot. This is a little bit harder to understand. Officially called a scoped slot, we can actually call it a slot with data compared to the previous two. The first two types are written inside the template of the component

Anonymous slot <slot></slot> Named slot <slot name="up"></slot>
Copy the code

However, scoped slots require that data be bound to slots. So you have to write it like this.

<slot name="up" :data="data"></slot>
 export default {
    data: function() {return {
        data: ['zhangsan'.'lisi'.'wanwu'.'zhaoliu'.'tianqi'.'xiaoba']}}}Copy the code

As we said earlier, slots are displayed only when the parent component writes a template to the child, as shown below.

<child> HTML template </child>Copy the code

If you write it, the slot has to display something in the browser, which is what HTML should be, but if you don’t write it, the slot is empty, which is nothing. OK, let’s say we have an HTML template, that is, the parent component will insert a template into the child component, what is the set of styles, it depends on the parent component’s HTML + CSS together, but what is the content of the style?

Because the scope slot is bound to a set of data, the parent component can be used. Thus, the situation becomes that the style parent has the final say, but the content can show the child component’s slot binding.

Let’s contrast, scope slots documentary named slot, the difference between a slot and because a single slot and named slots not bound data, so the parent component provides templates typically includes both styles including content again, the example above, you see the words, “menu 1”, “2” menu is the parent component content; With a scoped slot, the parent component only needs to provide a set of styles (provided that the data bound with the scoped slot is actually used).

In the following example, you can see that the parent component provides three styles (flex, UL, and direct display) without providing data, using the same array (an array of names) that the child component slot is bound to.

The parent component:

<template>
  <div class="father"> <h3> Here is the parent component </h3> <! <child> <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span> </div> </template> </child> <! <child> <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li> </ul> </template> </child> <! <child> <template slot-scope="user"> {{user.data}} </template> </child> <! <child> </child> </div> </template>Copy the code

Child components:

<template>
  <div class="child"> <h3> Here is the subcomponent </h3> // scope slot <slot :data="data"></slot>
  </div>
</template>

 export default {
    data: function() {return {
        data: ['zhangsan'.'lisi'.'wanwu'.'zhaoliu'.'tianqi'.'xiaoba']}}}Copy the code

The result looks like this:

github

The above three demos are put on GitHub, and you can take them if you need them. It is very convenient to use. It is based on VUe-CLI.

Address point here

The last

If this article helps you understand slot and scope-slot, please give it a thumbs up. Practice is the key to programming, so take action!

About the author

Technology blog | | making | | Denver home page