Slots in Vue mit der Composition API verstehen

Slots sind ein leistungsstarker Mechanismus in Vue, der es Komponenten ermöglicht, Inhaltsbereiche zu definieren, die von der übergeordneten Komponente angepasst werden können. Dies fördert die Wiederverwendbarkeit und Flexibilität beim Erstellen von UI-Komponenten. Vue 3 bietet zwei primäre Slot-Typen:

• Normale Slots: Bieten eine einfache Möglichkeit, Inhalte aus der übergeordneten Komponente in die Vorlage der untergeordneten Komponente einzufügen.
• Bereichsbezogene Slots: Ermöglichen eine erweiterte Anpassung durch die Übergabe von Daten (einem Bereich) von der untergeordneten Komponente an den Slot-Inhalt und ermöglichen so ein dynamisches Rendering basierend auf übergeordneten und untergeordneten Daten.

In Vue 3 ermöglichen Ihnen Slots die Erstellung flexibler Komponenten, indem sie eine Möglichkeit bieten, Inhalte an untergeordnete Komponenten zu übergeben. Die Composition API verbessert die Art und Weise, wie wir Slots nutzen, und macht sie intuitiver und leistungsfähiger.

Was sind Slots?

Slots sind eine Möglichkeit, Platzhalterinhalte in einer Komponente zu definieren, die bei Verwendung der Komponente mit benutzerdefinierten Inhalten gefüllt werden können. Sie helfen bei der Erstellung wiederverwendbarer und anpassbarer Komponenten.

Arten von Slots

• Standard-Slot: Der gebräuchlichste Typ. Er ermöglicht die Weitergabe von Inhalten ohne spezifischen Namen.
• Benannte Slots: Damit können Sie verschiedene Slots mit eindeutigen Namen angeben und so komplexere Layouts ermöglichen.
• Scoped Slots: Diese bieten eine Möglichkeit, Daten von der untergeordneten Komponente mithilfe eines Slots der übergeordneten Komponente zugänglich zu machen. Verwendung von Slots mit der Composition API

Verwendung von Slots mit der Composition API

So können Sie mithilfe der Composition API Slots in einer Vue 3-Komponente definieren und verwenden:
Beispiel eines Standard-Slots

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Verwendung:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Benannte Slots

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Verwendung:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

Bereichsbezogene Slots

Bereichsbezogene Slots ermöglichen es Ihnen, Daten von der untergeordneten Komponente zurück an die übergeordnete Komponente zu übergeben.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

Verwendung:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

Beispiel: Lebensmittellieferung mit Slots in Vue 3

Lassen Sie uns eine einfache Essenslieferanwendung mit Vue 3 mit der Composition API und Slots erstellen. In diesem Beispiel wird eine Hauptkomponente von FoodDelivery gezeigt, die Slots verwendet, um eine Liste von Lebensmitteln zusammen mit einer Kopf- und Fußzeile anzuzeigen.

Schritt 1: Erstellen Sie die Hauptkomponente

Hier ist die FoodDelivery-Komponente, die benannte Slots für die Kopfzeile, Lebensmittel und Fußzeile akzeptiert.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

Schritt 2: Lebensmittelkomponente erstellen

Als nächstes erstellen wir eine einfache FoodItem-Komponente, um einzelne Lebensmittelprodukte darzustellen.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

Schritt 3: Verwendung der Komponenten

Jetzt fassen wir alles in einer übergeordneten Komponente zusammen, die unsere FoodDelivery- und FoodItem-Komponenten verwendet.

Lass es mich erklären

FoodDelivery-Komponente: Diese Komponente dient als Layout für unseren Essenslieferdienst. Es akzeptiert drei Slots: einen Header, einen Standard-Slot für die Lebensmittel und einen Footer.
FoodItem-Komponente: Dies stellt einzelne Lebensmittelprodukte dar. Es verwendet Namen und Preis als Requisiten und verfügt über eine Methode, um das Hinzufügen des Artikels zu einem Warenkorb zu simulieren.

• App-Komponente: Dies ist die übergeordnete Komponente, in der alles zusammengeführt wird. Es verwendet die FoodDelivery-Komponente und füllt die Slots mit einer Willkommensnachricht, einer Liste von FoodItem-Komponenten und einer Dankesnachricht.

Anwendungsfälle

• Anpassen von Listen: Bereichsslots eignen sich ideal zum Erstellen von Listenkomponenten, bei denen jedes Element basierend auf seinen Eigenschaften eine eigene Rendering-Logik haben kann. Die untergeordnete Komponente kann die Artikeldaten an den Slot übergeben, und die übergeordnete Komponente kann die Vorlage für jedes Element mithilfe des bereichsbezogenen Slots definieren. (BasePaginated.vue)
• Bedingtes Rendering: Bereichsslots ermöglichen selektives Rendering innerhalb der untergeordneten Komponente basierend auf den Daten, die sie dem Slot bereitstellt. Sie könnten beispielsweise bedingt eine Meldung oder einen Fehlerstatus innerhalb des Slot-Inhalts anzeigen.
• Komplexe Layouts: Bereichsslots erleichtern die Erstellung komplexerer Layouts, bei denen verschiedene Teile des Layouts von der übergeordneten Komponente angepasst werden können, während die untergeordnete Komponente mithilfe des Bereichs bestimmte Inhalte oder Funktionen einfügen kann.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Erweiterte Überlegungen

• Benannte bereichsbezogene Slots: Sie können bereichsbezogenen Slots Namen zuweisen (z. B. ...), sodass Sie mehrere bereichsbezogene Slots in einer einzelnen untergeordneten Komponente haben und diese in der übergeordneten Komponente namentlich referenzieren können.
• Slot-Funktionen: In Vue 2 wurde auf Slots als $slots innerhalb der untergeordneten Komponente zugegriffen. Vue 3 bietet einen reaktiveren Ansatz mit $scopedSlots, das sind Funktionen, die Zugriff auf den Slot-Inhalt ermöglichen. Dies ermöglicht eine dynamische Slot-Manipulation und bedingtes Rendering innerhalb der untergeordneten Komponente.

Lassen Sie uns das Beispiel für einen Slot mit Gültigkeitsbereich erweitern, um es klarer und funktionaler zu machen. In diesem Beispiel wird gezeigt, wie Bereichsslots verwendet werden, um Elementdaten von einer untergeordneten Komponente an eine übergeordnete Komponente zu übergeben und so ein flexibles Rendering zu ermöglichen.

Schritt 1: Erstellen Sie die ItemList-Komponente

Diese Komponente zeigt eine Liste von Elementen an und verwendet einen bereichsbezogenen Slot, damit das übergeordnete Element anpassen kann, wie jedes Element gerendert wird.

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Schritt 2: Verwenden der ItemList-Komponente mit Scoped Slots

Jetzt erstellen wir eine übergeordnete Komponente, die die ItemList-Komponente verwendet und eine benutzerdefinierte Vorlage zum Rendern jedes Elements mithilfe des Bereichsslots bereitstellt.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

ItemList-Komponente:

• Diese Komponente definiert eine Liste von Elementen und verwendet einen Bereichsslot, um jedes Element der übergeordneten Komponente zugänglich zu machen.
• Wenn kein Steckplatz angegeben ist, wird standardmäßig die Beschreibung des Artikels angezeigt. ###Übergeordnete Komponente:
• Diese Komponente verwendet die ItemList und stellt eine benutzerdefinierte Vorlage zum Rendern jedes Elements bereit.
• Es greift über den Bereichsschlitz auf die Artikeldaten zu und enthält eine Schaltfläche, die beim Klicken eine Funktion auslöst.

Das Beispiel zeigt, wie man Scoped-Slots in Vue 3 effektiv nutzt, um eine flexible und wiederverwendbare Komponentenstruktur zu erstellen. Die übergeordnete Komponente kann das Rendering jedes Elements anpassen und gleichzeitig auf die von der untergeordneten Komponente bereitgestellten Daten zugreifen.

Fassen wir noch einmal zusammen

Dieses Beispiel zeigt, wie Sie Slots in einer Vue 3-Anwendung nutzen können, um ein flexibles Komponentensystem für die Essenslieferung zu erstellen. Sie können die Kopf- und Fußzeile sowie den Inhalt ganz einfach anpassen, ohne die Hauptkomponente zu ändern. Wenn Sie weitere Fragen haben oder weitere Details benötigen, können Sie diese gerne in einem Kommentar stellen.

Durch die effektive Nutzung normaler und bereichsbezogener Slots in Vue 3 mit der Composition API können Sie hochgradig wiederverwendbare und anpassbare UI-Komponenten erstellen und so die Wartbarkeit und Codeorganisation in Ihren Vue-Anwendungen fördern. Sie können den geeigneten Slot-Typ basierend auf Ihren spezifischen Inhaltsinjektions- und dynamischen Rendering-Anforderungen auswählen.
Der Weg zum Wachstum besteht darin, sich zu verbinden.
Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSlots in Vue mit der Composition API verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!