de:modul:m291:learningunits:lu10:theorie:a_components

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu10:theorie:a_components [2026/05/10 20:27] – gkochde:modul:m291:learningunits:lu10:theorie:a_components [2026/05/10 20:32] (aktuell) – gkoch
Zeile 3: Zeile 3:
 ===== Lernziele ===== ===== Lernziele =====
  
-  * Sie können ein Array of Objects mit ''ref()'' erstellen und im Template ausgeben.+  * Sie können ein Array of Objects erstellen und im Template ausgeben.
   * Sie können mit ''v-for'' dynamisch über ein Array iterieren und Komponenten rendern.   * Sie können mit ''v-for'' dynamisch über ein Array iterieren und Komponenten rendern.
   * Sie können Daten via Props von einer Eltern- an eine Kind-Komponente übergeben.   * Sie können Daten via Props von einer Eltern- an eine Kind-Komponente übergeben.
Zeile 154: Zeile 154:
 {{:de:modul:m291:learningunits:lu10:theorie:props_parent-to-child.png?direct&1100| Props von Eltern an Kind-Komponenten übergeben}} {{:de:modul:m291:learningunits:lu10:theorie:props_parent-to-child.png?direct&1100| Props von Eltern an Kind-Komponenten übergeben}}
  
-Mit **Props** können wir Daten von einer Eltern-Komponente an eine Kind-Komponente übergeben. Man kann sich Props wie Parameter einer Funktion vorstellen:+Mit **Props** können wir Daten von einer Eltern-Komponente an eine Kind-Komponente übergeben.
  
 <WRAP box center round 80%> <WRAP box center round 80%>
 <code html> <code html>
 <template> <template>
-//Elternkomponente mit :faq="item" <- das übergibt "item" als Prop+ 
 +<!-- Elternkomponente mit :faq="item" <- das übergibt "item" als Prop -->
 <AccordionItem v-for="item in faqData" :faq="item" /> <AccordionItem v-for="item in faqData" :faq="item" />
 +
 </template> </template>
 +
 +<script setup>
  
 // Kind-Komponente  mit Prop // Kind-Komponente  mit Prop
 // AccordionItem.vue empfängt: faq: Object (Datentyp) // AccordionItem.vue empfängt: faq: Object (Datentyp)
-<script setup> 
 const props = defineProps({ const props = defineProps({
   faq: Object,   faq: Object,
 }); });
 +
 </script> </script>
  
  • de/modul/m291/learningunits/lu10/theorie/a_components.1778437673.txt.gz
  • Zuletzt geändert: 2026/05/10 20:27
  • von gkoch