JavaScript – Verwenden von Slots in Vue: Slot

Verwenden von Slots in Vue: Slot

1. Das Slot-Tag <slot></slot> kann direkt in der Vorlage der untergeordneten Komponente verwendet werden, wodurch der von der übergeordneten Komponente in die untergeordnete Komponente eingefügte Inhalt angezeigt werden kann.

2. Sie können einige Standardwerte in das Slot-Tag schreiben. Wenn die übergeordnete Komponente keinen Inhalt einfügt, wird der Standardwert angezeigt. Beim Einfügen von Inhalt wird nur der eingefügte Inhalt angezeigt.

3. Wenn Sie mehrere Slot-Tags verwenden und mehrere Inhalte direkt einfügen, enthält jedes Slot-Tag alle eingefügten Inhalte.

Sie können das Slot-Attribut verwenden, um einen bestimmten Namen für die verschiedenen eingefügten Inhalte festzulegen, und dann den entsprechenden Namensattributwert für das entsprechende Slot-Tag festlegen, damit das Slot-Tag den angegebenen eingefügten Inhalt anzeigt.

1. Slot ist ein allgemeiner Begriff. Die drei Slot-Tags in der Vorlage sind alle Slots.

2. Mehrere Slots müssen jedoch unterschieden werden und für jeden wird ein Namensattribut festgelegt. Dies wird als „benannter Slot“ bezeichnet und muss mit dem Namensattribut benannt werden.

3. Das Obige ist der in den Steckplatz eingefügte Inhalt. Der Inhalt eines bestimmten Namens wird in den entsprechenden Namen der Unterkomponente eingefügt. Hier wird es in den Slot name="footer" eingefügt.

4. Wenn nur ein Slot vorhanden ist, muss dieser im Allgemeinen nicht benannt werden. Nur wenn mehrere Slots vorhanden sind, benötigen Sie einen Namen, um sie unterscheiden zu können.

<div id="app">
      <Kind>
       <!-- <div slot="header">Kopfzeile</div> -->
        <div slot="footer">Fußzeile</div>
      </child>
    </div>
    <Skript>
   Vue.Komponente('Kind',{
    //Slots erleichtern die Übergabe von Elementen an Unterkomponenten, und für Unterkomponenten ist es auch sehr einfach, den Inhalt der Slots-Vorlage zu verwenden:`<div>
                <Slotname='Header'>
                  <h6>Der Standardwert für den Inhalt des Header-Slots ist leer</h6>
                </slot>
                <div Klasse="Inhalt">Text</div>
                <slot name='Fußzeile'></slot>
              </div>`
   })
    var vm = neuer Vue({
        el: "#app",
    })
    </Skript>

Bereichsbezogene Slots: Mit Vorlagentag umschließen

1. <slot v-for='item of list' :item=item></slot> legt nur fest, ob eine Schleife über die Liste ausgeführt werden soll. Wie die einzelnen Elemente in der Liste angezeigt werden, wird jedoch extern festgelegt.

2. Sie müssen also einen Slot an die untergeordnete Komponente übergeben. Zuerst müssen Sie eine Vorlage [feste Schreibmethode] in die äußerste Ebene einfügen (dies ist der Bereichsslot) und ein Slot-Scope-Attribut schreiben (der Attributwert wird angepasst). (Beispiel: <template slot-scope='props'></template>, was bedeutet, dass, wenn eine Unterkomponente einen Slot verwendet, sie Elementdaten an den Slot übergibt und diese Daten verwendet werden können, wenn die Unterkomponente darüber verwendet wird. Diese Daten werden in den Attributwert des Slot-Scope eingefügt.)

3. Situationen, in denen Scoped Slots verwendet werden sollten: wenn eine Unterkomponente durchlaufen werden muss oder ein Teil davon von außen übergeben werden soll.

Bei Verwendung von Slots mit Gültigkeitsbereich können untergeordnete Komponenten Daten an die Slots der übergeordneten Komponente übergeben. Wenn der von der übergeordneten Komponente übergebene Slot diese Daten empfangen möchte, muss er eine Vorlage in der äußeren Schicht verwenden und die übergebenen Daten über den Attributnamen empfangen, der dem Slot-Bereich entspricht.

<div id="app">
        <Kind>
          <!--
            Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, wird eine Bereichsslot-Vorlage in die untergeordnete Komponente eingefügt.
            Deklarieren Sie im Slot ein Datenelement, das Sie von der untergeordneten Komponente erhalten haben, und platzieren Sie es in den Eigenschaften des Slot-Bereichs. Zeigen Sie es dann über die H1-Vorlage an -->
           <template slot-scope="Eigenschaften">
             <li>{{props.item}} -hallo</li>
           </Vorlage>
        </child>
    </div>
    <Skript>
    Vue.Komponente('Kind', {
        Daten:Funktion(){
          zurückkehren {
            Liste: [1,2,3,4]
          }
        },
        //Wenn die untergeordnete Komponente einen Slot verwendet, übergeben Sie die Daten eines Elements an den Slot und verwenden Sie diese Daten dann in der Vorlage der übergeordneten Komponente:`<div>
                    <ul>
                      <slot v-for="Element der Liste" :item=Element>
                      </slot>
                    </ul>
                  </div>`
                 
    })
    var vm = neuer Vue({
        el: "#app"
    })
 </Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!