Data rodiče

Obsah slotu je napsaný v šabloně rodiče, a proto patří rodiči. Může používat jeho refy, vypočítané hodnoty i funkce, stejně jako cokoli jiného v té šabloně. Tady panel ukazuje objednávku z App.vue a jeho tlačítko volá funkci z App.vue:

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

const objednavka = ref(["Espresso", "Mrkvový dort"]);

function vyprazdniObjednavku() {
    objednavka.value = [];
}
</script>

<template>
    <Panel nadpis="Vaše objednávka">
        <p>Položek: {{ objednavka.length }}</p>
        <button @click="vyprazdniObjednavku">Vyprázdnit</button>
    </Panel>
</template>

Když se objednávka změní, Vue obsah v panelu aktualizuje, stejně jako kdekoli jinde v šabloně App.vue. Panel o objednávce nic neví, jen říká, kam patří jeho obsah. Proto jde jeden panel použít na cokoli.

Opačně to nefunguje: obsah nevidí props ani proměnné panelu. <p>{{ nadpis }}</p> mezi tagy <Panel nadpis="Vaše objednávka"> neukáže nic a konzole hlásí:

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

App.vue žádný nadpis nemá. (Varování jmenuje <Panel>, protože tam se obsah ukazuje.) Rodič ten nadpis ale zná (sám ho panelu dal), takže ho do obsahu může napsat rovnou.

Se styly je to stejné. <style scoped> v Panel.vue platí pro vlastní prvky panelu, jeho section a h2, ne pro obsah od rodiče. Obsah stylujte tam, kde je napsaný: v App.vue nebo ve style.css.

V tomto cvičení pridejDoObjednavky() vloží položku do objednávky s pocet: 1. Když v ní položka už je, zvýší její pocet o jedna.