Der Kern der modernen Webanwendungsentwicklung sind Komponenten. Jede Anwendung besteht aus mehreren Komponenten, die zusammenarbeiten, um ein Ganzes zu bilden. Um in verschiedenen Szenarien und sogar in verschiedenen Anwendungen wiederverwendet zu werden, müssen diese Komponenten die gr??te Flexibilit?t und Wiederverwendbarkeit aufweisen. Viele Frameworks (insbesondere Vue) verwenden einen Mechanismus, der als "Slots" bezeichnet wird, um diese Anforderungen zu erfüllen.

Slots sind eine leistungsstarke und vielseitige Inhaltsverteilung und ein Kombinationsmechanismus. Sie k?nnen Slots als anpassbare Vorlagen (?hnlich wie PHP -Vorlagen) vorstellen, die an verschiedenen Stellen und in verschiedenen Anwendungsf?llen verwendet werden k?nnen, wodurch unterschiedliche Effekte erzeugt werden. Beispielsweise werden in einem UI -Framework wie Vuetify Slots verwendet, um h?ufige Komponenten wie Warnkomponenten zu erstellen. In diesen Komponenten dienen Slots als Platzhalter für Standardinhalte und zus?tzlichen/optionalen Inhalte (z. B. Symbole, Bilder usw.).

Slots k?nnen Sie bestimmten Komponenten struktur, Stil und Funktionalit?t hinzufügen. Durch die Verwendung von Slots k?nnen Entwickler die Anzahl der in einer einzelnen Komponente verwendeten Requisiten erheblich reduzieren, wodurch Komponenten einfacher und einfacher zu verwalten sind.

In diesem Tutorial wird untersucht, wie Slots in Vue 3 profitieren k?nnen. Fangen wir an.

Schlüsselpunkte

• VUE -Slots verbessern die Komponentenflexibilit?t: Slots in VUE.Js erm?glichen eine dynamische Platzierung des Inhalts innerhalb der Komponente, sodass es stark wiederverwendbar ist und an verschiedene Kontexte angepasst wird.
• Basisschlitze und SCOPE -Slots: Vue bietet zwei Arten von Slots - grundlegende Slots und Bereichsschlitze. Grundlegende Slots werden für einen einfachen Ersatz für den Inhalt verwendet, w?hrend Scope -Slots den Zugriff auf Subcomponent -Daten erm?glichen und komplexere und interaktivere Inhaltsintegration erm?glichen.
• Mehrere Slots und benannte Slots fügen strukturelle Komplexit?t hinzu: Für Komponenten, die mehrere Inhaltsbereiche erfordern, unterstützt VUE mehrere Slots, einschlie?lich benannter Slots, was dazu beitr?gt, Inhalte effektiver zu organisieren und die Funktionalit?t zu verbessern.
• Slots vs. Requisiten: W?hrend Requisiten für die übergabe von Daten an Komponenten von entscheidender Bedeutung sind, bieten Slots eine flexiblere L?sung für die Verwaltung komplexer Inhaltsstrukturen und die Reduzierung von Abh?ngigkeiten von Requisiten für die Inhaltsverteilung.
• Praktische Anwendung von Slots: Vue -Slots sind nicht auf statische Inhalte beschr?nkt, sondern k?nnen auch zur Bereitstellung vollst?ndiger Vorlagen oder interaktiver Funktionen verwendet werden, wodurch die Funktionalit?t und Interaktivit?t von Komponenten verbessert wird.
• Verwenden von Slots mit Requisiten für das Best -Komponenten -Design: Die Best Practice besteht darin, Slots für die Inhaltsverwaltung und Requisiten für die Datenverarbeitung in Komponenten zu verwenden, wodurch Komponenten effizienter und klarer werden k?nnen.

Grundlegende Slot -Verwendung

Vue bietet haupts?chlich zwei Schlitze: Einfacher Slot- und Umfangsschlitz. Beginnen wir mit einem einfachen Slot. Betrachten Sie das folgende Beispiel:

const app = Vue.createApp({})

app.component('primary-button', {
  template: `
    <button>
      <slot>OK</slot>
    </button>
  `
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

Hier haben wir eine Hauptknopfkomponente. Wir m?chten, dass der Schaltfl?chentext anpassbar ist, sodass wir die Slot -Komponente im Schaltfl?chenelement verwenden, um Textplatzhalter hinzuzufügen. Wenn wir keine benutzerdefinierten Werte bereitstellen, m?chten wir auch einen standardm??igen (Fallback) gemeinsamen Wert. Vue verwendet alles, was wir in die Slot -Komponente als Standard -Slot -Inhalt einfügen. Wir müssen also nur den Text "OK" in die Komponente platzieren. Jetzt k?nnen wir die Komponente wie folgt verwenden:

<div id="app">
  <primary-button></primary-button>
</div>

Das Ergebnis ist eine Schaltfl?che mit Text "OK", da wir keinen Wert bereitstellen. Aber was ist, wenn wir eine Schaltfl?che mit benutzerdefiniertem Text erstellen m?chten? In diesem Fall geben wir in der Komponentenimplementierung einen benutzerdefinierten Text wie folgt an:

<div id="app">
  <primary-button>Subscribe</primary-button>
</div>

Hier nimmt Vue den benutzerdefinierten Text "abonnieren" und verwendet ihn anstelle des Standardtextes.

Wie Sie sehen k?nnen, k?nnen wir auch in diesem einfachen Beispiel viel Flexibilit?t bei der Rendern von Komponenten erlangen. Aber dies ist nur die Spitze des Eisbergs. Schauen wir uns ein komplexeres Beispiel an.

Erstellen Sie einen "Satz des Tages" -Komponente

Jetzt werden wir eine Komponente erstellen, die einen t?glichen Satz anzeigt. Hier ist der Code:

const app = Vue.createApp({})

app.component('quote', {
  template: `
    <div>
      <h2>The quote of the day says:</h2>
      <p>
        <slot></slot>
      </p>
    </div>
  `
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

<div id="app">
  <quote>
    <div class="quote-box">
      <span class="quote-text">"Creativity is just connecting things."</span>
      <br>
      - Steve Jobs
    </div>
  </quote>
</div>

.quote-box {
  background-color: lightgreen;
  width: 300px;
  padding: 5px 10px;
}

.quote-text {
  font-style: italic;
}

In diesem Beispiel erstellen wir einen Titel, dessen Inhalt gleich bleibt, und dann stellen wir die Slot -Komponente in den Absatz ein, dessen Inhalt sich basierend auf den Zitaten des Tages ?ndern wird. Beim Rendern einer Komponente zeigt VUE den Titel aus der Zitatkomponente an, gefolgt von dem Inhalt, den wir in das Zitat -Tag einfügen. Achten Sie auch auf die CSS -Klassen, die bei der Erstellung und Implementierung von Zitaten verwendet werden. Wir k?nnen die Komponente nach Bedarf auf zwei Arten stylen.

Verwenden Sie mehrere Slots

W?hrend ein einzelner Slot sehr stark ist, reicht dies in vielen F?llen nicht aus. In realen Szenarien ben?tigen wir normalerweise mehrere Slots, um die Arbeit zu erledigen. Glücklicherweise erm?glicht es uns Vue, so viele Slots zu verwenden, wie wir wollen. Lassen Sie uns sehen, wie Sie mehrere Slots verwenden, indem Sie eine einfache Kartenkomponente erstellen.

Basiskartenkomponenten bauen

Wir erstellen eine Kartenkomponente mit drei Teilen: Titel, K?rper und Fu?zeile:

const app = Vue.createApp({})

app.component('card', {
  template: `
    <div>
      <slot name="header"></slot>
      <main>
        <slot></slot>
      </main>
      <slot name="footer"></slot>
    </div>`
})

app.mount('http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

<div id="app">
  <card>
    <template v-slot:header>
      <h2>Card Header Title</h2>
    </template>

    <template v-slot:default>
      <p>
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </p>
    </template>

    <template v-slot:footer>
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Delete</a>
    </template>
  </card>
</div>

Um mehrere Slots zu verwenden, müssen wir für jeden Steckplatz einen Namen angeben. Die einzige Ausnahme ist der Standard -Slot. Im obigen Beispiel fügen wir den Header- und Fu?zeilen -Slots ein Namensattribut hinzu. Slots, die keine Namen liefern, gelten als Standard -Slots.

Wenn wir die Kartenkomponente verwenden, müssen wir ein Vorlagenelement mit der V-Slot-Anweisung und dem Schlitznamen verwenden: V-Slot: [Slot-Name].

(Der verbleibende Teil wird hier weggelassen, da die L?nge zu lang ist. Bitte behalten Sie einige Inhalte nach Bedarf selektiv auf oder l?schen Sie sie selektiv.)

Das obige ist der detaillierte Inhalt vonEine umfassende Anleitung zu Vue -Slots. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!