Detaillierte Erklärung zu anonymen Slots und benannten Slots in Vue

<div id="app">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <Skript>
 
        // Root-Komponente (übergeordnete Komponente, auch Basiskomponente genannt)
        lass vm = neues Vue({
            el:'#app',
        })
    </Skript>

 // lokale Komponente deklarieren let child = {
            Vorlage:`
            <div>
                <p>Ich bin eine Unterkomponente</p>
                <p>Ich bin eine Reihe von Wörtern</p>
                <slot>Dies ist ein Platzhalter</slot>
            </div>
            `
        }

  // Root-Komponente (übergeordnete Komponente, auch Basiskomponente genannt)
        lass vm = neues Vue({
            el:'#app',
 
            // Unterkomponenten (Registrierungscenter)
            Komponenten: {
                // Schlüssel-Wert-Paar, Kind kann weggelassen werden, wenn Schlüssel und Wert gleich sind
            }
        })

<div id="app">
 
        <!-- Komponenten verwenden -->
        <Kind></Kind>
    </div>

 <!-- Komponenten verwenden -->
        <Kind>
            <h1 style="color: aqua;">Dies ist ein Inhalt</h1>
        </child>

 Vorlage:`
            <div>
                <p>Ich bin eine Unterkomponente</p>
                <p>Ich bin eine Reihe von Wörtern</p>
                <slot>Dies ist ein Platzhalter</slot>
                <Steckplatz></Steckplatz>
                <Steckplatz></Steckplatz>
            </div>
            `

<Kind>
            <h1 style="color: aqua;">Dies ist der erste Inhalt</h1>
            <h1 style="color: red;">Dieser zweite Inhalt</h1>
        </child>

 Vorlage:`
            <div>
                <p>Ich bin eine Unterkomponente</p>
                <p>Ich bin eine Reihe von Wörtern</p>
                <slot name="default">Dies ist ein Platzhalter</slot>
                <slot name="t1">Dies ist der Inhalt des Platzhalters t1</slot>
                <slot name="t2">Dies ist der Inhalt des t2-Platzhalters</slot>
                <slot name="t3">Dies ist der Inhalt des t3-Platzhalters</slot>
                <slot name="t5">Dies ist der Inhalt von t4</slot>
            </div>
            `,

 <Kind>
            <!-- Diese beiden Sätze befinden sich derzeit noch im anonymen Slot-->
            <h1 style="color: aqua;">Dies ist der erste Inhalt</h1>
            <h1 style="color: red;">Dieser zweite Inhalt</h1>
 
                <!-- slot="t1" gibt den Slot an, in den der Inhalt eingefügt werden soll -->
            <h2 style="color: blue;" slot="t1">Ich möchte es im benannten Slot t1 verwenden</h2>
            <h3 style="color: green;" slot="t2">Ich möchte es im benannten Slot t2 verwenden</h3>
            <h4 style="color: orange;" slot="t3">Ich möchte es in den benannten Slot t3 einfügen</h4>
            <h5 style="color: pink;" slot="t4">Ich möchte es im benannten Slot t4 verwenden</h5>
        </child>