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/04 00:02] – 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 108: Zeile 108:
 Vue rendert für jedes Element im Array automatisch ein neues ''%%<div>%%''. Fügen wir dem Array ein neues Objekt hinzu, erscheint sofort ein neues Element im Browser. Vue rendert für jedes Element im Array automatisch ein neues ''%%<div>%%''. Fügen wir dem Array ein neues Objekt hinzu, erscheint sofort ein neues Element im Browser.
  
-==== Warum braucht auch :faq einen Doppelpunkt? ==== 
- 
-<WRAP box center round 80%> 
-<code html> 
-<!-- Ohne Doppelpunkt: übergibt den Text "item" als String --> 
-<AccordionItem faq="item" /> 
- 
-<!-- Mit Doppelpunkt: übergibt die JavaScript-Variable "item" --> 
-<AccordionItem :faq="item" /> 
-</code> 
-</WRAP> 
- 
-Ohne '':'' erhält ''AccordionItem'' buchstäblich den Text ''"item"'' – vier Zeichen, weiter nichts. Mit '':'' wertet Vue den Ausdruck als JavaScript aus und übergibt das tatsächliche Objekt aus der ''v-for''-Schleife. 
  
 ==== Das key-Attribut ==== ==== Das key-Attribut ====
Zeile 167: 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>
  
Zeile 216: Zeile 207:
  
 '':faq="item"'' bedeutet: Übergib das aktuelle ''item'' als Prop ''faq'' an ''AccordionItem''. '':faq="item"'' bedeutet: Übergib das aktuelle ''item'' als Prop ''faq'' an ''AccordionItem''.
 +
 +=== Warum braucht auch :faq einen Doppelpunkt? ===
 +
 +<WRAP box center round 80%>
 +<code html>
 +<!-- Ohne Doppelpunkt: übergibt den Text "item" als String -->
 +<AccordionItem faq="item" />
 +
 +<!-- Mit Doppelpunkt: übergibt die JavaScript-Variable "item" -->
 +<AccordionItem :faq="item" />
 +</code>
 +</WRAP>
 +
 +Ohne '':'' erhält ''AccordionItem'' buchstäblich den Text ''"item"'' – vier Zeichen, weiter nichts. Mit '':'' wertet Vue den Ausdruck als JavaScript aus und übergibt das tatsächliche Objekt aus der ''v-for''-Schleife.
  
 ==== Props im Template verwenden ==== ==== Props im Template verwenden ====
  • de/modul/m291/learningunits/lu10/theorie/a_components.1777845728.txt.gz
  • Zuletzt geändert: 2026/05/04 00:02
  • von gkoch