Slot sorting and usage analysis in vue

Operating environment of this tutorial: Windows 7 system, vue 2.9.6 version, DELL G3 computer.

Vue slots (slots) are mainly divided into three types:

Default slot, named slot, scope slot

The slot in vue refers to a placeholder provided in the child component to the parent component;
Indicated by tags, the parent component can fill in any template code, such as HTML, component, etc., and the filled content will replace the label of the child component (replace the placeholder).

Default slot

The default slot is the simplest type of slot, which is consistent with the description above, which is to change the contents of the child component in the parent component by replacing the placeholder.

grammar:

Place a placeholder (slot) in the child component:

<template>
    <span>
        <span>Sasha loses weight</span>
        <slot></slot>
    </span>
</template>
 
<script>
export default {
    name: 'chassList'
}
</script>

Then refer to the child component in the parent component and fill the contents of this placeholder (slot):

<template>
    <div>
        <span>What to eat today：</span>
        <chassList>
            <span>My sister-in-law doesn't let Sasha eat</span>
        </chassList>
    </div>
</template>

At this time, the content displayed on the page will be [What to eat today: Sasha loses weight and does not allow Sasha to eat].

Named slots

For example, there are two places in the child component where placeholders need to be replaced (two slots). If the parent component wants to fill the corresponding content into the corresponding slot, there is no way to determine which slot to fill the corresponding content into the default slot. To cope with such a scenario, named slots came into being.

A named slot is actually to give a name to the slot in the child component. When the parent component refers to the child component, it can fill the corresponding content into the corresponding slot according to the name.

grammar:

Place two named slots in the subcomponent:

<template>
    <div>
        <span>The first slot</span>
        <slot name="one"></slot>
        <span>Second slot</span>
        <slot name="two"></slot>
    </div>
</template>
 
<script>
export default {
    name: 'chassList'
}
</script>

Reference the child component in the parent component and fill the corresponding content into the corresponding slot through v-slot:[name]:

<template>
    <div>
        <span>Two slots：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

At this time, the content displayed on the page will be [two slots: the first slot one, the second slot two].

Notes on using default and named slots

1. If there are multiple default slots in the child component, all the fill contents specified to the default slot in the parent component (no named slots specified) will be filled into each default slot of the child component.

2. Even if the filling order of named slots is disrupted in the parent component, as long as the name of the named slot corresponds to the fill content, the filled content can be correctly rendered into the corresponding named slot, one carrot and one pit.

3. If both the default slot and the named slot exist in the child component, but the named slot specified in the parent component cannot be found in the child component, the content will be discarded directly and will not be filled into the default slot.

Scope slots

Compared with the previous default slot and named slot, scope slot will be more difficult to understand and use.

• The two slots in front emphasize the [position] of the filling placeholder;
• Scope slot emphasizes the [scope] of the function of data;
• Scope slots are slots with parameters (data);

Introduce parameters (data) into the slot of the child component and provide them to the parent component for use. This parameter (data) is only valid in the slot. The parent component can customize the display content based on the slot parameters (data) transmitted from the child component.

grammar:

Place a slot with parameters (data) in the subcomponent:

<template>
    <div>
        <span>The parameter value in the slot is</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>
 
<script>
export default {
    name: 'classList',
    data() {
        return {
            isAllwo: {
                one: 'one',
                two: 'two'
            }
        }
    }
}
</script>

Reference the child component in the parent component, and accept the parameters passed in the child component's slot and use the data through slot-scope.

<template>
    <div>
        <span>Scope slots：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ }}
            </template>
        </classList>
    </div>
</template>

At this time, the content displayed on the page will be [Scope slot: the parameter value in the slot is one].

Because the {{}} in template supports expressions, you can use the different parameter values ​​passed from the child component to customize the page content.

<template>
    <div>
        <span>Scope slots：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ || 'Null value' }}
            </template>
        </classList>
    </div>
</template>

At this time, if the parameter passed in the subcomponent is a null value, the display content of the page will be [Scope slot: The parameter value in the slot is a null value].

There are many usage scenarios for scope slots and are widely used in various frameworks. For example, in ElementUI, customizing the display content of a certain row or column of a table is a typical application scenario of scope slots.

This is the end of this article about slot sorting and usage analysis in vue. For more related slot content, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!