A deep understanding of the specific use of slot and slot-scope in vue, vueslot-scope

A deep understanding of the specific use of slot and slot-scope in vue, vueslot-scope
Preface

The slot documentation in vue is short, and the language is concise. In addition, it differs in the usage frequency and sequence of common options such as methods, data, and computed, this may make it easy for the developer who first came into contact with the slot to generate "Forget it, go back and learn it. Anyway, you can write basic components". Therefore, the vue instruction document is closed.

In fact, the concept of slot is very simple. It is divided into three parts below. This part is also written in the vue instruction document order.

Before entering the three parts, I first asked those who have not touched the slot to have a simple concept: slot, which is a component HTML template, the display of this template is not displayed, and its display is determined by the parent component. In fact, the two core problems of a slot are shown here, that is, display without display and how to display it.

Because the slot is a template, any component can be divided into non-slot templates and slot templates from the perspective of the template type.

Non-slot templates refer to html templates, which refer to 'div, span, ul, Table'. The display and hiding of non-slot templates and how to display them are controlled by the plug-in itself; the slot template is a slot, which is an empty shell, because it is displayed and hidden, and what html template display is finally used is controlled by the parent component. However, the position displayed by the slot is determined by the child component. The slot is written in the template of the component, and the template passed by the parent component will be displayed in the future.

Single slot | default slot | anonymous slot

The first is a single slot. A single slot is the official name of vue, but it can also be called the default slot, or we can call it an anonymous slot relative to the specified slot. Because it does not need to set the name attribute.

A single slot can be placed in any position of the component, but like its name, only one slot of this class can exist in one component. Correspondingly, there can be many named slots, as long as the name (name attribute) is different.

The following is an example.

Parent component:

<Template> <div class = "father"> 
Child components:
<Template> <div class = "child"> 
In this example, because the parent component writes an html template in <child> </child>, the template of the anonymous slot of the child component is as follows. That is to say, the sub-component's anonymous slot is used by the following template.
<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>
Final rendering result:

Note: styles are added to all demos for easy observation. The parent component is filled with a gray background, and child components are filled with light blue background.
Named slot


The anonymous slot does not have the name attribute, so it is an anonymous slot. If the slot is added with the name attribute, it becomes a named slot. The specified slot can appear N times in a component. Appear in different locations. The following example shows a component with two named slots and a single slot. The three slots are displayed by the parent component in the same css style. The difference is that the content is slightly different.
Parent component:
<Template> <div class = "father"> 
Child components:
<Template> <div class = "child"> // named slot <slot name = "up"> </slot> 
Display result

As you can see, the parent component uses the slot attribute on the html template to associate the specified slot. Html templates without slot attributes are associated with anonymous slots by default.
Scope slot | slot with data


Finally, it is our scope slot. This is a little hard to understand. It is officially called its range slot. In fact, we can call it a slot with data compared to the first two slots. What do you mean? The first two types are written in the template of the component.
Anonymous slot

<slot></slot>
Named slot

<slot name="up"></slot>
However, the scope slot requires that data be bound to the slot. That is, 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']  } },}
As we have mentioned above, the last display of the slot is not to see whether the parent component has written a template under child, as shown below.
<Child> html template </child>
After writing, the slot has to display something in the browser. Something is what html should look like. If it is not written, the slot is an empty shell and there is nothing at all.
OK. Let's say that there is an html template, that is, when the parent component inserts a template into the Child component, what kind of style is inserted, this is determined by the html + css of the parent component, but what about the content in this style?
It is because the scope slot is bound with a set of data that can be used by the parent component. As a result, the situation becomes like this: the style parent component has the final say, but the content can display the sub-component slot bound.
We will compare the differences between the range slot and a single slot and the named slot, because a single slot and the named slot are not bound to data, therefore, the parent component provides a template that includes both the style and content. In the above example, the text you see, "menu 1 ", "menu 2" is the content provided by the parent component. In the scope slot, the parent component only needs to provide a set of styles (on the premise that the data bound to the scope slot is used ).
In the following example, you can see that the parent component provides three styles (flex, ul, and direct display) without providing data, the data uses the personal name array bound to the sub-component slot.
Parent component:
<Template> <div class = "father"> 
Child components:
<Template> <div class = "child"> 
Result:
Github


The above three demos are available on GitHub. If you need them, you can obtain them. It is very convenient to use. It is based on vue-cli to build a project.
Address point here
Last
I hope this article will be helpful to you. The specific use of slot and slot-scope in vue will be introduced here. We hope you will continue to follow our website!