Slots

In dieser Aufgabe wendest du `Slots` und dynamische Komponenten an.

Erstelle eine Galerie-Komponente, die Bilder und Videos anzeigen kann.

Lösungsschritte

Lade folgendes Vue Projekt herunter und richte es lokal ein. Öffne es anschliessend in VS Code.

Download GitHub directorydownload-directory.github.io

Projektcode herunterladen

cd slots
npm install
npm run dev

Überblick verschaffen

• Schaue den Code in der App.vue an und versuche zu verstehen, was die Ausgangslage des Projekts ist.

Du sollst eine Komponente erstellen, die alle Daten aus der galleries Variable anzeigen kann.

<Gallery> Komponente erstellen

Die Galerien sollen als Liste ausgegeben werden. Dazu kannst du eine <Gallery> Komponente erstellen.

• Erstelle die Komponente in src/components/Gallery.vue

• Füge das komplette section.gallery Element im <template> Bereich der Komponente ein.

• Kopiere die relevanten Styles in die Komponente.

• Binde die <Gallery> Komponente in der App.vue an der richtigen Stelle ein, so dass die Beispielinhalte wieder angezeigt werden.

Galerien auflisten

• Ergänze den benötigten Code, damit für jede Galerie in der galleries Variable eine Galerie angezeigt wird (also zwei Galerien). Die angezeigten Inhalte können noch vernachlässigt werden.

Properties ergänzen

• Definiere in der <Gallery> Komponente die benötigten Properties um den Titel und die Beschreibung anzuzeigen.

• Übergib die Properties an die <Gallery> Komponente, so dass die richtigen Texte angezeigt werden. Die Bilder kannst du für den Moment noch vernachlässigen.

Slot definieren

Die Gallery Komponente zeigt momentan ein Beispiel-Bild und ein Beispiel-Video an. Diese Daten sollen dynamisch gerendert werden.

Als ersten Schritt kannst du einen <slot> definieren. Diese spezielle Vue-Komponente erlaubt es dir, den Inhalt einer Komponente von der Elternkomponente aus zu verändern.

• Kopiere das Beispiel-Bild und Beispiel-Video aus dem .gallery__images Element in die Zwischenablage.

• Ersetze den Code mit einem <slot /> Tag.

<div class="gallery__images">
  <slot /> 
</div>

• Füge den weg kopierten Code nun als Kindelement der <Gallery> Komponente in der App.vue ein.

<Gallery ...>
    <!-- Bild -->
    <div class="image">
        ...
    </div>
    
    <!-- Video -->
    <div class="video">
        ...
    </div>
</Gallery>

Die Darstellung der Galerie im Browser sollte unverändert sein.

<GalleryImage> und <GalleryVideo> Komponenten erstellen

Dank des <slot> ist die <Gallery> Komponente jetzt nur noch für die Anzeige des Titles, der Beschreibung und des Grids zuständig. Was genau im Grid platziert wird, kann die Elternkomponente neu frei entscheiden.

• Lagere die Beispielinhalte div.image und div.video in neue <GalleryImage> und <GalleryVideo> Komponenten aus.

• Achte darauf, die relevanten CSS-Styles mit in die Komponenten zu verschieben.

• Definiere jeweils eine Property für die src des Bildes/Videos sowie den Beschreibungstext.

• Gib die Properties im <template> Bereich der Komponente aus.

Dynamische Komponente rendern

Wir möchten nun über alle items einer Galerie iterieren und abhängig vom type entweder die GalleryVideo oder die GalleryImage Komponente einbinden.

Vue bietet dir für diesen Anwendungsfall eine generische <component> Komponente an. Über die is Property lässt sich dynamisch bestimmen, welche Komponente gerendert werden soll.

Um zu definieren, welche Komponente zu welchem type gehört, können wir folgendes Objekt im <script> Bereich ergänzen:

const components = ref({
  image: GalleryImage,
  video: GalleryVideo
})

Danach kann innerhalb der <Gallery> Komponente mit Hilfe der <component> Komponente und dem components Objekt ein v-for erstellt werden:

• Erweitere untenstehenden Beispielcode noch so, dass die src und description ebenfalls an die Komponente übergeben werden.

<Gallery
  v-for="gallery in galleries"
  ...
>
  <component
    v-for="item in gallery.items"
    :key="item.src"
    :is="components[item.type]"
  />
</Gallery>

• Versuche den obenstehenden Code zu verstehen. Kannst du erklären, was passiert?

Zusatzaufgabe: Weitere Medien-Typen ergänzen

• Neu soll auch Audio von Soundcloud in der Galerie platziert werden können. Erstelle eine weitere Komponente, um type: 'audio' in der Galerie nutzen zu können.