Eine umfassende Anleitung zu Vue -Slots

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.).

Mit

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('https://www.php.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('https://www.php.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('https://www.php.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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="https://www.php.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!