Deeply understand slot and slot scope in Vue

Write in front
The documentation on slots in Vue is very short, and the language is concise. In addition, the differences in frequency and order of use between Vue and commonly used options such as methods, data, and computed may cause developers who are new to slots to easily feel like "forget it, learn later, you can already write basic components", so they closed the Vue documentation.
In fact, the concept of a slot is very simple. Let's talk about it in three parts. This section is also written in the order of the Vue documentation.
Before entering the third section, let students who have not yet been exposed to a slot have a simple concept of what a slot is: a slot, also known as a slot, is an HTML template for a component. Whether this template is displayed or not, and how it is displayed is determined by the parent component. In fact, the two core issues of a slot are highlighted here, which are whether to display it and how to display it.
Due to the fact that slots are a template, any component can be divided into two categories from the perspective of template types: non slot templates and slot templates.
Non slot templates refer to HTML templates, which refer to 'div, span, ul, table', etc. The display and hiding of non slot templates and how they are displayed are controlled by the plugin itself; The slot template is a slot, which is an empty shell because its display and hiding, as well as the final HTML template display, are controlled by the parent component. However, the position of the slot display is determined by the child component itself. The slot is written in which block of the component template, and the template passed from the parent component will be displayed in which block in the future.
Single slot | Default slot | Anonymous slot
Firstly, there is a single slot, which is the official name for Vue, but it can also be called the default slot, or as opposed to a named slot, we can call it an anonymous slot. Because it does not need to set the name attribute.
A single slot can be placed anywhere in a component, but like its name, there can only be one such slot in a component. Correspondingly, there can be many named slots, as long as the name (name attribute) is different.
Below is an example to demonstrate.
Parent component:

Sub components:：

In this example, because the parent component has written an HTML template in, the anonymous slot template for the child component is as follows. That is to say, the anonymous slot of the sub component has been used, which is used by the template below.是被下面这块模板使用了。

The final rendering result is shown in the figure:

Note: All demos have been styled for easy observation. Among them, the parent component is filled with a gray background, and the child components are filled with light blue.
Named slot
Anonymous slots do not have a name attribute, so they are anonymous slots. Therefore, adding a name attribute to a slot becomes a named slot. Named slots can appear N times in a component. Appear in different locations. The following example is a component with two named slots and a single slot. These three slots are displayed by the parent component in the same CSS style, with slight differences in content.
Parent component:

子组件：

The displayed results are shown in the figure:
As can be seen, the parent component is associated with a named slot through the slot attribute on the HTML template. HTML templates without slot attributes are associated with anonymous slots by default.
Scope slot
Finally, there is our scope slot. This is a bit difficult to understand. Officially, it is called a scope slot. In fact, compared to the previous two slots, we can call it a slot with data. What does it mean? The first two are both written in the template of the component
Anonymous slot

Named slot

However, the scope slot requires binding data on the slot. That is to say, you need to write it like this.

export default {

data: function(){
  return {
    data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
},

}
As we mentioned earlier, whether the slot is displayed or not depends on whether the parent component has written a template under the child, as shown below.

html template

Once written, the slot always needs to display something in the browser, which is what HTML should look like. If not written, the slot is just an empty shell, with nothing.
OK, when we say there is an HTML template, that is, when the parent component inserts a template into the child component, what style should be inserted? This is determined by the parent component's HTML+CSS, but what is the content in this style?
Because the scope slot is bound to a set of data, the parent component can be used. Thus, the situation becomes like this: the style of the parent component is the final say, but the content can show the slot binding of the child component.
Let's compare the differences between a scope slot and a single slot and a named slot. Because a single slot and a named slot do not bind data, the template provided by the parent component should include both style and content. In the example above, the text you see, "Menu 1" and "Menu 2", are all provided by the parent component itself; And for the scope slot, the parent component only needs to provide a set of styles (provided that the data bound to the scope slot is confirmed).
In the following example, you can see that the parent component provides three styles (flex, ul, and direct display), but does not provide data. The data is all based on the person name array bound by the child component slot itself.
Parent component:

Sub components:

export default {

data: function(){
  return {
    data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
}

}
The results are shown in the figure:
Github
The above three demos are placed on GitHub, and you can go and get them if you need them. It is very convenient to use and is based on the Vue cli construction project.
Address point here
last
If this article is helpful for you to understand slot and scope slot, please don't be stingy with your likes.
Programming is valued in practice, take action now!