Shulou(Shulou.com)06/01 Report--

This article mainly explains "slot and slot-scope case Analysis in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the case Analysis of slot and slot-scope in vue.

Write at the front

The documentation on the slot in vue is very short, and the language is very concise, coupled with the difference in frequency and order of use of common options such as methods,data,computed, which may cause developers who come into contact with the slot for the first time to produce "forget it, learn later, anyway, you can write basic components", so close the vue documentation.

In fact, the concept of slot is very simple, which is divided into three parts. This section is also written in the order of the vue documentation.

Before entering the three parts, let the students who have not touched the slot have a simple idea of what a slot is: the slot, that is, slot, is a HTML template of the component, and it is up to the parent component to decide whether the template is displayed or not, and how to display it. In fact, the two core questions of a slot are pointed out here, that is, whether or not to display and how to display.

Because the slot is a template, any component can be divided into two categories: non-slot template and slot template. The non-slot template refers to the html template, which refers to the div, span, ul, table' and so on. The display and hiding of the non-slot template and how to display it are controlled by the plug-in itself; the slot template is slot, which is an empty shell, because it shows and hides and what kind of html template to display finally is controlled by the parent component. However, the location of the slot display is determined by the child component itself. Where the slot is written in the component template, 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, 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 have to set the name property.

A single slot can be placed anywhere in a component, but as its name suggests, 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.

Let's show it with an example.

Parent component:

Here is the parent component menu 1 menu 2 menu 3 menu 4 menu 5 menu 6

Subcomponents:

Here are the subcomponents.

In this example, because the parent component has a html template in it, the template for the anonymous slot of the child component looks like this. That is, the anonymous slot of the subcomponent is used by the template below.

Menu 1 menu 2 menu 3 menu 4 menu 5 menu 6

Note: all demo are styled for easy observation. Where the parent component is filled with a gray background and the child components are filled with light blue.

Named slot

An anonymous slot has no name attribute, so it is an anonymous slot, so if the slot adds a name attribute, it becomes a named slot. Named slots can appear N times in a component. In different locations. The following example is a component with two named slots and a single slot, the three slots are displayed by the parent component in the same set of css style, except that the content is slightly different.

Parent component:

Here is the parent component menu 1 menu 2 menu 3 menu 4 menu 5 menu 6 menu-1 menu-2 menu-3 menu-4 menu-5 menu-6 menu > 1 menu-> 2 menu-> 3 menu-> 4 menu-> 5 menu-> 6

Subcomponents:

/ / named slot here is the sub-component / / named slot / / anonymous slot

As you can see, the parent component associates 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 | slot with data

Finally, there is our scope slot. This is a little more difficult to understand. Officially, it is called the scope slot. In fact, compared with the first two slots, we can call it the slot with data. What do you mean, the first two are written in the template of the component

Anonymous slot named slot

But the scope slot requires that data be bound on top of the slot. That is, you have to write something like this.

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

As we said earlier, the final display of the slot is to see if the parent component has written a template under the child, as shown below.

Html template

If you write it, the slot always has to show something on the browser, which is what the html should look like. If you don't write it, the slot is an empty shell and there is nothing. OK, when we say that there is a html template, that is, when the parent component inserts the template into the child component, what kind of style is inserted? it is decided by the html+css of the parent component, but what about the content of this style?

Because the scope slot binds a set of data, the parent component can be used. As a result, the situation becomes like this: the style parent component is in charge, but the content can show that the child component slot is bound.

Let's compare the difference between a scope slot and a single slot and a named slot, because a single slot and a named slot do not bind data, so the parent component provides a template that includes both styles and content, in the above example, the text you see, "menu 1" and "menu 2" are all provided by the parent component itself. In the scope slot, the parent component only needs to provide a set of styles (provided that it is actually used as the data bound by the scope slot).

In the following example, you can see that the parent component provides three styles (flex, ul, and direct display), none of which provides data, all using the array of names bound by the child component slot itself.

Parent component:

Here is the parent component {{item}} {{item}} {{user.data}} I am the template

Subcomponents:

Here is the sub-component / / scope slot export default {data: function () {return {data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']} so far, I believe you have a deeper understanding of "slot and slot-scope instance analysis in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.