Es gibt mehrere Slots in Vue

Es gibt 3 Arten von Slots in vue: 1. Standard-Slot, Syntax „<slot></slot>“; 2. Benannter Slot, Syntax „“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer. Die Slots von

vue sind hauptsächlich in drei Typen unterteilt:

Standardslot, benannter Slot, Bereichsslot

Der Slot in Vue bezieht sich auf die Unterkomponente, die einem von der übergeordneten Komponente verwendeten Platzhalter
entspricht Die übergeordnete Komponente wird durch eine Beschriftung dargestellt und kann jeden Vorlagencode in diesem Platzhalter ausfüllen, z. B. HTML, Komponenten usw., und der ausgefüllte Inhalt ersetzt die Beschriftung der untergeordneten Komponente (ersetzt den Platzhalter).

Standardslot

Der Standardslot ist die einfachste Art von Slot. In Übereinstimmung mit der obigen Beschreibung wird der Effekt erzielt, dass der Inhalt in der untergeordneten Komponente durch Ersetzen des Platzhalters geändert wird.

Syntax: <slot></slot><slot></slot>

在子组件中放置一个占位符（slot）：

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

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

然后在父组件中引用这个子组件，并给这个占位符（slot）填充内容：

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

这时页面展现的内容会是【今天吃啥：莎莎减肥大嫂不让莎莎吃饭】。

具名插槽

比如在子组件中有两个要替换占位符的地方（两个slot），这时父组件如果要将相应的内容填充到相应的插槽中，靠默认插槽是没有办法判断相应的内容要填充到哪个插槽中的。为了应对这样的场景，具名插槽应运而生。

具名插槽，其实就是给子组件中的插槽取一个名字，而父组件就可以在引用子组件的时候，根据这个名字对号入座，将相应内容填充到相应的插槽中。

语法：<slot name="名称"></slot>

在子组件中放置两个具名插槽：

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

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

在父组件中引用该子组件，并通过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>

这时页面展示的内容会是【两个插槽：第一个插槽one，第二个插槽two】。

使用默认插槽和具名插槽的注意事项

1.如果子组件中存在多个默认插槽，那么父组件中所有指定到默认插槽的填充内容（未指定具名插槽），会全部填充到子组件的每个默认插槽中。

2.即使在父组件中将具名插槽的填充顺序打乱，只要具名插槽的名字对应上了，填充的内容就能被正确渲染到相应的具名插槽中，一个萝卜一个坑。

3.如果子组件中同时存在默认插槽和具名插槽，但是在子组件中找不到父组件中指定的具名插槽，那么该内容会被直接丢弃，而不会被填充到默认插槽中。

作用域插槽

作用域插槽相比于前面的默认插槽和具名插槽，会比较难于理解和运用。

• 前面的两个插槽强调的是填充占位的【位置】；

• 作用域插槽强调的则是数据作用的【范围】；

• 作用域插槽，就是带参数（数据）的插槽；

在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。

语法：<slot :自定义name=data中的属性或对象></slot>

Platzieren Sie einen Platzhalter (Slot) in der untergeordneten Komponente:

<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>

Verweisen Sie dann auf diese untergeordnete Komponente in der übergeordneten Komponente und geben Sie den Inhalt von an Dieser Platzhalter (Slot) lautet:

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

Zu diesem Zeitpunkt lautet der auf der Seite angezeigte Inhalt [Was es heute zu essen gibt: Sashas Schwägerin zur Gewichtsabnahme lässt Sasha nicht essen].

Benannter Slot

Wenn es beispielsweise in der untergeordneten Komponente zwei Stellen gibt, an denen Platzhalter ersetzt werden sollen (zwei Slots), dann möchte die übergeordnete Komponente den entsprechenden Inhalt in den entsprechenden Slot füllen. Dort Es gibt keine Möglichkeit, basierend auf dem Standard-Slot zu bestimmen, in welchen Slot der entsprechende Inhalt eingefügt werden soll. Um solche Szenarien zu bewältigen, wurden benannte Slots ins Leben gerufen.

Der benannte Steckplatz dient eigentlich dazu, dem Steckplatz in der untergeordneten Komponente einen Namen zu geben, und die übergeordnete Komponente kann den entsprechenden Inhalt basierend auf diesem Namen in den entsprechenden Steckplatz einfügen, wenn sie auf die untergeordnete Komponente verweist. Syntax: <slot name="name"></slot>

🎜Platzieren Sie zwei benannte Slots in der untergeordneten Komponente: 🎜

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

🎜Referenzieren Sie die untergeordnete Komponente in der übergeordneten Komponente und Füllen Sie den entsprechenden Inhalt über v-slot:[name] in den entsprechenden Slot: 🎜rrreee🎜Zu diesem Zeitpunkt wird der auf der Seite angezeigte Inhalt [zwei Slots: der erste Slot einer, der zweite Slot Slot zwei] sein. 🎜🎜🎜Hinweise zur Verwendung von Standard-Slots und benannten Slots🎜🎜🎜1. Wenn in der untergeordneten Komponente mehrere Standard-Slots vorhanden sind, werden alle Füllinhalte, die dem Standard-Slot in der übergeordneten Komponente zugewiesen sind (es sind keine benannten Slots angegeben), verwendet vollständig in jeden Standardsteckplatz der untergeordneten Komponente eingefügt werden. 🎜🎜2. Auch wenn die Füllreihenfolge der benannten Slots in der übergeordneten Komponente gestört ist, kann der gefüllte Inhalt korrekt in die entsprechenden benannten Slots, eine Karotte und eine Grube, gerendert werden, solange die Namen der benannten Slots übereinstimmen. 🎜🎜3. Wenn in der untergeordneten Komponente sowohl Standard-Slots als auch benannte Slots vorhanden sind, der in der übergeordneten Komponente angegebene benannte Slot jedoch nicht in der untergeordneten Komponente gefunden werden kann, wird der Inhalt direkt verworfen, ohne in den Standard-Slots gefüllt zu werden Slot. 🎜🎜🎜🎜Scope-Slots🎜🎜🎜🎜Scope-Slots sind schwieriger zu verstehen und zu verwenden als die vorherigen Standard-Slots und benannten Slots. 🎜

• 🎜Die ersten beiden Slots betonen die [Position] des Füllens von Platzhaltern 🎜
• 🎜Scope-Slots Der Schwerpunkt liegt auf dem [ Umfang] der Daten; 🎜
• 🎜Scope-Slots sind Slots mit Parametern (Daten); 🎜

🎜Beim Einfügen von Unterkomponenten werden die Parameter (Daten) eingefügt Slot werden der übergeordneten Komponente bereitgestellt. Dieser Parameter (Daten) ist nur innerhalb des Slots gültig. Die übergeordnete Komponente kann den Anzeigeinhalt basierend auf den von der untergeordneten Komponente übergebenen Slot-Parametern (Daten) anpassen. 🎜🎜Syntax: <slot: Attribut oder Objekt in benutzerdefiniertem Namen=data></slot>🎜🎜Platzieren Sie einen Slot mit Parametern (Daten) in der untergeordneten Komponente: 🎜 rrreee🎜Referenzieren Sie die Unterkomponente in der übergeordneten Komponente und verwenden Sie den Slot-Bereich, um die im Slot der Unterkomponente übergebenen Parameter zu akzeptieren und die Daten zu verwenden. 🎜rrreee🎜Zu diesem Zeitpunkt ist der auf der Seite angezeigte Inhalt [Scope-Slot: Der Parameterwert im Slot ist eins]. 🎜🎜Da {🎜{}} in der Vorlage Ausdrücke unterstützt, können Sie zu diesem Zeitpunkt die verschiedenen von der Unterkomponente übergebenen Parameterwerte verwenden, um den Seiteninhalt anzupassen. 🎜rrreee🎜Wenn zu diesem Zeitpunkt der in der Unterkomponente übergebene Parameter ein Nullwert ist, lautet der Anzeigeinhalt der Seite [Scope Slot: Der Parameterwert im Slot ist ein Nullwert]. 🎜🎜Scope-Slots haben verschiedene Verwendungsszenarien und werden häufig in verschiedenen Frameworks verwendet. Beispielsweise ist das Anpassen des Anzeigeinhalts einer bestimmten Zeile oder Spalte einer Tabelle in ElementUI ein typisches Beispiel für Scope-Slots. 🎜🎜【Verwandte Empfehlung: „🎜vue.js Tutorial🎜“】🎜

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Slots in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!