Die Daten des Elternteils

Der Inhalt eines Slots steht in der Vorlage des Elternteils, gehört also dem Elternteil. Er kann die Refs, berechneten Werte und Funktionen des Elternteils verwenden, wie alles andere in dieser Vorlage. Hier zeigt ein Panel die Bestellung von App.vue, und sein Button ruft eine Funktion von App.vue auf:

<script setup>
import { ref } from "vue";
import Panel from "./Panel.vue";

const bestellung = ref(["Espresso", "Karottenkuchen"]);

function bestellungLeeren() {
    bestellung.value = [];
}
</script>

<template>
    <Panel titel="Deine Bestellung">
        <p>Artikel: {{ bestellung.length }}</p>
        <button @click="bestellungLeeren">Leeren</button>
    </Panel>
</template>

Ändert sich die Bestellung, aktualisiert Vue den Inhalt im Panel, wie es überall sonst in der Vorlage von App.vue geschähe. Das Panel weiß nichts von der Bestellung; es sagt nur, wohin sein Inhalt kommt. Deshalb kann ein Panel für alles verwendet werden.

In die andere Richtung funktioniert es nicht: Der Inhalt kann die Props und Variablen des Panels nicht sehen. Ein <p>{{ titel }}</p> zwischen den Tags von <Panel titel="Deine Bestellung"> zeigt nichts, und die Konsole meldet:

[Vue warn]: Property "titel" was accessed during render but is not defined on instance.
  at <Panel>
  at <App>

App.vue hat kein titel. (Die Warnung nennt <Panel>, weil der Inhalt dort angezeigt wird.) Aber der Elternteil kennt den Titel trotzdem: Er hat ihn dem Panel gegeben. Er kann den Titel also selbst in den Inhalt schreiben.

Dasselbe gilt für Stile. Das <style scoped> von Panel.vue gestaltet die eigenen Elemente des Panels, sein section und h2, aber nicht den Inhalt vom Elternteil. Gestalte den Inhalt dort, wo er geschrieben ist: in App.vue oder in style.css.

In dieser Übung legt zurBestellungHinzufuegen() einen Artikel mit anzahl: 1 in die Bestellung, und ist der Artikel schon darin, addiert sie 1 zu seiner anzahl.