In VUE sind Slots für den Bau wiederverwendbarer und flexibler Komponenten von wesentlicher Bedeutung, und es gibt drei Haupttypen: Standard, benannt und Scoped. Bei Standard-Slots kann ein Elternteil Inhalte in eine untergeordnete Komponente ohne spezifische Platzierung übergeben, ideal für Einzelabschnittskomponenten wie Karten. Mit dem Namen Slots erm?glichen mehrere Inhaltsinsertionspunkte, indem Sie Slots Namen zuweisen und eine genaue Kontrolle darüber geben, wo jedes Inhaltsstück angezeigt wird, z. B. in Header, Fu?zeilen oder Seitenleisten. Scoped -Slots gehen weiter, indem Daten aus der untergeordneten Komponente an den übergeordneten übergang zurückgegeben werden, wodurch dynamisches Rendering auf der Grundlage des internen Zustands gleichzeitig aufrechterhalten wird und gleichzeitig die Trennung von Bedenken aufrechterhalten wird. Diese Slot -Typen verbessern gemeinsam die Wiederverwendbarkeit, Anpassung und Wartbarkeit im Vue -Komponenten -Design.

Wenn Sie wiederverwendbare Komponenten in Vue erstellen, sind Slots eines der leistungsst?rksten Werkzeuge für die Komposition. Sie k?nnen Inhalte von dem übergeordneten Komponenten übergeben, was sie flexibler und dynamischer macht. Es gibt drei Haupttypen von Slots in Vue: Standard , benannt und abgeschottet (auch als Render -Requisiten oder Scoped -Slots bezeichnet). Jeder hat seinen eigenen Anwendungsfall und hilft Ihnen, Ihre Benutzeroberfl?che effektiver zu strukturieren.

Lassen Sie uns sie nacheinander aufschlüsseln und sehen, wie sie beim Design des Komponenten helfen.

Standard -Slots - die grundlegende M?glichkeit, Inhalte zu übergeben

Ein Standard -Slot ist der einfachste Typ. Es erm?glicht die übergeordnete Komponente, HTML- oder VUE -Vorlageninhalte in eine untergeordnete Komponente zu übergeben.

Stellen Sie sich beispielsweise vor, Sie haben eine <card></card> -Komponente, die einige Inhalte einbringt:

 <!-card.vue->
<Semplate>
  <div class = "card">
    <div class = "kartenk?rper">
      <Slot> </slot>
    </div>
  </div>
</template>

Sie k?nnen es dann so verwenden:

 <!-parentComponent.vue->
<karten>
  <p> Dies ist der Inhalt in der Karte. </p>
</Card>

Dies funktioniert gut, wenn Sie nur einen einzelnen Inhalt injizieren müssen. Aber was ist, wenn Sie verschiedene Teile des Inhalts in bestimmten Bereichen der Komponente platzieren m?chten? Dort kommen genannte Slots ins Spiel.

Named Slots - Passen Sie bestimmte Abschnitte an

Mit benannten Slots k?nnen Sie mehrere Insertionspunkte in einer Komponente definieren. Sie geben jedem Slot einen Namen, und die übergeordnete Komponente gibt an, welcher Inhalt wohin geht.

Hier ist ein Beispiel mit einer Layoutkomponente:

 <!-layout.vue->
<Semplate>
  <Header>
    <slot name = "header"> </slot>
  </header>
  <main>
    <Slot> </slot> <!-Standard-Slot->
  </main>
  <fouter>
    <slot name = "footer"> </slot>
  </footer>
</template>

Und so würden Sie es verwenden:

 <!-parentComponent.vue->
<Layout>
  <Template #Header>
    <h1> Seitentitel </h1>
  </template>

  <p> Hauptseite Inhalt geht hier. </p>

  <Template #footer>
    <p> Copyright ? 2025 </p>
  </template>
</Layout>

• Verwenden Sie #header oder v-slot:header um einen benannten Steckplatz zu zielen.
• Der Standardfenster funktioniert immer noch ohne Namen.
• Auf diese Weise k?nnen Sie die Kontrolle darüber geben, wo jeder Teil der Vorlage des Elternteils in der untergeordneten Komponente angezeigt wird.

Scoped Slots - übergeben Daten an den Elternteil zurück

Scoped Slots sind etwas fortgeschrittener, aber super nützlich. Sie erm?glichen es einer untergeordneten Komponente, Daten an den übergeordneten übergeben weiterzugeben, die dann im Slot -Inhalt verwendet werden k?nnen.

Stellen Sie sich vor, es gibt dem Elternteil Zugriff auf interne Komponentendaten, damit das Rendering anpassen kann.

Beispiel: Eine wiederverwendbare Listenkomponente, mit der der Elternteil entscheiden kann, wie jedes Element angezeigt wird.

 <!-list.vue->
<Semplate>
  <ul>
    <li v-für = "Element in Elementen": key = "item.id">
      <Slot: item = "item"> </slot>
    </li>
  </ul>
</template>

<Script>
Standard ausführen {
  Data () {
    zurückkehren {
      Artikel: [
        {ID: 1, Etikett: &#39;Apple&#39;},
        {id: 2, label: &#39;banana&#39;},
        {ID: 3, Etikett: &#39;Cherry&#39;}
      ]
    };
  }
};
</script>

Jetzt kann der Elternteil anpassen, wie jedes Element aussieht:

 <!-parentComponent.vue->
<List v-Slot = "{item}">
  <strong> {{item.label}} </strong>
</List>

• Das Kind übergeht item an den Slot -Bereich.
• Der Elternteil verwendet Destructuring ( { item } ), um diese Daten zu erhalten.
• Dies macht die Komponente sehr anpassbar, ohne ihre interne Logik zu ?ndern.

Bei Bedarf k?nnen Sie auch Scoped -Slots mit benannten Slots kombinieren:

 <!-ComplexComponent.vue->
<Semplate>
  <slot name = "Standard": user = "user": roles = "roles"> </slot>
</template>

Dann benutze es wie:

 <ComplexComponent>
  <Vorlage #default = "{Benutzer, Rollen}">
    <p> Benutzer: {{user.name}} </p>
    <ul>
      <li v-für = "Rolle in Rollen": key = "rollen"> {{rollen}} </li>
    </ul>
  </template>
</KomplexComponent>

Warum Slots verwenden?

Slots sind unerl?sslich, da sie gleichzeitig die Wiederverwendbarkeit und Anpassung f?rdern. Mit Slots k?nnen Sie:

• Erstellen Sie generische UI -Wrapper (wie Modale, Karten, Layouts), die Inhalte akzeptieren.
• Lassen Sie Elternkomponenten bestimmen, wie bestimmte Teile gerendert werden, w?hrend die Gesamtstruktur konsistent bleibt.
• Teilen Sie die Logik in einer Komponente, w?hrend Sie den übergeordneten Visuals über Scoped -Slots steuern.

Sie sind besonders nützlich, wenn sie Komponentenbibliotheken erstellen oder wiederverwendbare Layouts entwerfen.

Also ja, Slots in Vue - standardm??ig, benannt und scoped - geht es nicht nur darum, Inhalte einzuführen. Es geht darum, intelligente, flexible und wartbare Komponentenstrukturen zu erm?glichen. Grunds?tzlich fühlen sich Ihre Komponenten lebendig und anpassungsf?hig.

Das obige ist der detaillierte Inhalt vonWas sind Slots (Standard, benannt, skopiert) in Vue und wie erm?glichen sie eine flexible Komponentenzusammensetzung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!