Erfahren Sie mehr über Slots in Vue

Vue-Slots sind ein unverzichtbarer Bestandteil beim Erlernen von Vue. Als ich zum ersten Mal mit Vue in Kontakt kam, hatte ich nur wenig Verständnis für diese Konzepte, insbesondere für die Scope-Slots.

Später fand ich die Slots immer nützlicher.

Teilen Sie Ihr Wissen über Spielautomaten.

1. Slot-Inhalte

In einem Satz: Der Slot kann beliebige Inhalte enthalten.

Schauen Sie sich zunächst den folgenden Code an: Deklarieren Sie eine untergeordnete Komponente.

Wenn ich jetzt Inhalte in platzieren möchte, was wird das Ergebnis sein?

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component(&#39;child-component&#39;,{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

<child-component>你好</child-component>

Der Ausgabeinhalt ist immer noch der Inhalt in der Komponente, und der in geschriebene Inhalt hat keine Auswirkung.

Wir fügen der Komponente jetzt einen -Slot hinzu.

Das „Hallo“, das wir in geschrieben haben, funktioniert! ! !

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

Jetzt wissen wir, was ein Slot ist:

Slot ist eine von Vue implementierte Reihe von Inhaltsverteilungs-APIs, die das -Element als Ventil für die Übertragung verteilter Inhalte verwenden.

Dieser Satz bedeutet, dass einige Inhalte im Komponenten-Tag keine Wirkung haben, wenn ich das Slot-Element in der Komponente deklariere. Der im Komponentenelement geschriebene Inhalt wird darauf ausgeführt!

2. Benannte Slots

Benannte Slots sollen diesem Slot einen Namen geben

In der Komponente gebe ich den Slots einen Namen, einer heißt „Mädchen“ und der andere heißt „Junge“ und einen anderen Namen Ich kann mich nicht erinnern.

Dann entspricht in der dem Slot-Attribut entsprechende Inhalt eins zu eins dem Namen in der Komponente.

Der ohne Namen ist der Standard-Slot! !

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美丽、购物、逛街
        </template>
        <template slot="boy">
            帅气、才实
        </template>
        <div>
            我是一类人，
            我是默认的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component(&#39;child-component&#39;,{
        template:`
            <div>
            <h4>这个世界不仅有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

3. Scope-Slot

Ich habe noch nie verstanden, was ein Scope-Slot ist! ! !

Um es ganz klar auszudrücken: Es ist mein Attribut auf der Komponente, das innerhalb des Komponentenelements verwendet werden kann!

Schauen wir uns zunächst das einfachste Beispiel an! !

Wir definieren ein Attribut, sagen wir, für das Element (definieren Sie es nach Ihren Wünschen!), verwenden dann das untergeordnete Komponentenelement und fügen dann das Attribut „slot-scope“ für das Vorlagenelement hinzu! ! Nennen Sie es einfach a

Wir drucken a und stellen fest, dass es {"say" : "Hello"} ist, das Schlüssel-Wert-Paar, das aus den Attributen und Werten im Slot besteht! ! !

Das ist der Scope-Slot!

Ich kann die Attribute/Werte der Komponente auf dem Komponentenelement verwenden! !

<div id="app">
    <child>
        <template slot-scope="a">
　　　　　　<!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component(&#39;child&#39;,{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

Look am Beispiel weiter unten:

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component(&#39;child&#39;,{
        props:[&#39;lists&#39;],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{
            nameList:[
            {id:1,name:&#39;孙悟空&#39;},
            {id:2,name:&#39;猪八戒&#39;},
            {id:3,name:&#39;沙和尚&#39;},
            {id:4,name:&#39;唐僧&#39;},
            {id:5,name:&#39;小白龙&#39;},
            ]
        }
    })
</script>

ook auf die Ausgabergebnisse

bezogene Empfehlungen:

2020 Front-End-Vue-Interview Fragen Zusammenfassung (mit Antworten)

vue Tutorial Empfehlungen : Die neuesten 5 vue.js-Video-Tutorials im Jahr 2020

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

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