There are several slots in vue

There are three types of slots in vue: 1. Default slot, syntax "58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee"; 2. Named slot, syntax "

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue’s slots are mainly divided into three types:

Default slot, named slot, scope slot Slot

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

Default slot

The default slot is the simplest slot, consistent with the above description, that is, by replacing the placeholder The symbol achieves the effect of changing the content in the child component in the parent component.

Syntax:58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee

Place a placeholder (slot) in the child component:

<template>
    <span>
        <span>莎莎减肥</span>
        <slot></slot>
    </span>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

Then Reference this sub-component in the parent component and fill in the content of this placeholder (slot):

<template>
    <div>
        <span>今天吃啥：</span>
        <chassList>
            <span>大嫂不让莎莎吃饭</span>
        </chassList>
    </div>
</template>

At this time, the content displayed on the page will be [What to eat today: Sasha’s weight loss sister-in-law won’t let Sasha eat].

Named slot

For example, if there are two places (two slots) where placeholders need to be replaced in a subcomponent, then If the parent component wants to fill the corresponding content into the corresponding slot, there is no way to determine which slot the corresponding content should be filled into by relying on the default slot. In order to deal with such scenarios, named slots came into being.

Named slot is actually to give a name to the slot in the child component, and the parent component can fill in the corresponding slot according to this name when referencing the child component. .

Syntax:d34e96e0131a1ff4a158a95223ce35107971cf77a46923278913ee247bc958ee

Place two named slots in the child component:

<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

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

<template>
    <div>
        <span>两个插槽：</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 slots and named slots

1. If there are multiple default slots in the child component, then all the default slots in the parent component will be assigned to the default slot. The fill content of the slot (no named slot is specified) will be filled in 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 names of the named slots correspond, the filled content can be correctly rendered into the corresponding named slots. A The carrot is a pit.

3. If there are both default slots and named slots in the child component, but the named slot specified in the parent component cannot be found in the child component, then the content will be discarded directly without is filled into the default slot.

Scope slot

Scope slot is more difficult to understand and understand than the previous default slot and named slot. use.

• The first two slots emphasize the [position] of filling the placeholder;

• The scope slot emphasizes the data [Scope];

• The scope slot is the slot with parameters (data);

is inserted in the subcomponent The parameters (data) brought into the slot are provided to the parent component. This parameter (data) is only valid within the slot. The parent component can customize the display content based on the slot parameters (data) passed from the child component.

Syntax: 172313f1e3dd8ea70f30d3da511149327971cf77a46923278913ee247bc958ee

Place a parameter ( data) slot:

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;classList&#39;,
    data() {
        return {
            isAllwo: {
                one: &#39;one&#39;,
                two: &#39;two&#39;
            }　　
        }
    }
}
</script>

Reference the subcomponent in the parent component, and use slot-scope to accept the parameters passed in the slot of the subcomponent and use the data.

<template>
    <div>
        <span>作用域插槽：</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 the template {{}} supports expressions, you can use the different parameter values ​​passed by the subcomponent to customize the page content.

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| &#39;空值&#39; }}
            </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].

Scope slots have various usage scenarios 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 called scope slot. A typical application scenario of slots.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of There are several slots in vue. For more information, please follow other related articles on the PHP Chinese website!