Slot arrangement and usage analysis in Vue

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

There are three main types of slots in Vue:

Default slots, named slots, scoped slots

The slot in Vue refers to a placeholder in a child component that is provided to the parent component;
Indicated by the tag, the parent component can fill any template code in this placeholder, such as HTML, components, etc., and the filled content will replace the tag of the child component (replace the placeholder).

Default Slots

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

grammar:

Place a placeholder in the child component:

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

Then reference this child component in the parent component and fill the placeholder with content:

<template>
    <div>
        <span>What to eat today:</span>
        <chassList>
            <span>Sister-in-law won't let Sasha eat</span>
        </chassList>
    </div>
</template>

At this time, the content displayed on the page will be [What to eat today: Sasha is on a diet and her sister-in-law doesn’t let her eat].

Named Slots

For example, there are two places (two slots) in the child component where the placeholders need to be replaced. At this time, if the parent component wants to fill the corresponding content into the corresponding slots, the default slot cannot determine which slot the corresponding content should be filled into. To deal with such scenarios, named slots came into being.

A named slot is actually to give a name to the slot in the child component, and the parent component can match the slot according to the name when referencing the child component and fill the corresponding content into the corresponding slot.

grammar:

Place two named slots in the child component:

<template>
    <div>
        <span>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>
                one,
            </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 a child component, all the filling contents (unspecified named slots) assigned to the default slots in the parent component will be filled into each default slot of the child component.

2. Even if the filling order of the named slots is disrupted in the parent component, as long as the names of the named slots match, the filled content can be correctly rendered into the corresponding named slots, one carrot for one pit.

3. If both default slots and named slots exist in a child component, but the named slot specified in the parent component cannot be found in the child component, the content will be discarded directly instead of being filled in the default slot.

Scoped Slots

Compared with the default slots and named slots mentioned above, scoped slots are more difficult to understand and use.

• The first two slots emphasize the position of the filler.
• The scope slot emphasizes the [scope] of data action;
• A scoped slot is a slot with parameters (data);

Bring parameters (data) into the slot of the child component for use by the parent component. The parameter (data) is only valid in the slot. The parent component can customize the displayed content based on the slot parameter (data) passed from the child component.

grammar:

Put a slot with parameters (data) in the child component:

<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 use slot-scope to accept the parameters passed from the slot of the child component and use the data.

<template>
    <div>
        <span>Scoped slots:</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </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 {{}} in template supports expressions, you can customize the page content by using the different parameter values ​​passed from the subcomponents.

<template>
    <div>
        <span>Scoped slots:</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| 'empty value' }}
            </template>
        </classList>
    </div>
</template>

At this time, if the parameter passed from the child component is a null value, the displayed content of the page will be [Scope slot: the parameter value in the slot is null].

Scoped slots have various usage scenarios and are widely used in various frameworks. For example, customizing the display content of a row or column in a table in ElementUI is a typical application scenario of scoped slots.

This is the end of this article about the organization and usage analysis of slots in vue. For more information about the different types of slots in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!