Vue - Components - Versionsgeschichte

37.49.72.8: /* Custom Form Control */

2021-01-06T13:37:24Z

Custom Form Control

2021-01-06T13:33:08Z

Dynamic Components

2021-01-05T19:23:27Z

Fallthrough props

2021-01-04T09:09:28Z

Dynamic Components

2021-01-04T08:25:44Z

2021-01-04T08:21:34Z

Dynamic Components

2021-01-04T08:09:21Z

scoped Slots

2021-01-03T19:51:08Z

scoped Slots

2021-01-03T19:50:13Z

scoped Slots

2021-01-03T19:49:42Z

scoped Slots

@@ Zeile 855: / Zeile 855: @@
 == Custom Form Control ==
 Wenn man v-model in einer eigenen Component nutzt
-<my-component v-model="myProp"></my-component>
+ <my-component v-model="myProp"></my-component>
 macht Vue im Prinzip eine Kombi aus event listener und binding mit diesen Objekten:
-<my-component :model-value="" @update:modelValue=""></my-component>
+ <my-component :model-value="" @update:modelValue=""></my-component>
-Diese stehen daher in der Komponente so zur Verfügung:
+Sobald v-model eingesetzt wird stehen also auch das '''Emit und das Prop in der Komponente''' zur Verfügung:
 Beispiel RatingControl.vue

@@ Zeile 850: / Zeile 850: @@
    </error-alert>
 </teleport>
 </syntaxhighlight>

@@ Zeile 228: / Zeile 228: @@
 </syntaxhighlight>
-==== Fallthrough props ====
+==== Fallthrough props - $attr Objekt ====
 Angenommen Du hast eine BaseButton.vue Komponente ohne definierte Props.
 '''Im Parent kannst Du trotzdem Attribute und Events''' nutzen...
@@ Zeile 236: / Zeile 236: @@
   this.$attrs
 zugreifen kannst. Dies kann z.b. bei Komponenten mit nur geringer Funktionalität nützlich sein, die eher zur reinen Ausgabe dienen.
 ==== Alle props in einem Objekt binden ====

← Nächstältere Version		Version vom 4. Januar 2021, 09:09 Uhr
Zeile 810:		Zeile 810:

	Wrapt man die Komponente mit keep-alive werden die Inhalte vor dem Löschen gecacht und können später wieder hergestellt werden.		Wrapt man die Komponente mit keep-alive werden die Inhalte vor dem Löschen gecacht und können später wieder hergestellt werden.
		+
		+	=== <teleport> ===
		+	Teleport ist eine eingebaute Vue Komponente. Mit dieser kannst Du DOM Elemente in andere Bereiche "teleportieren"
		+
		+	Dies kann z.b. für Modal Fenster sinnvoll sein, die man aus semantischen Gründen lieber auf der App oder <body> Ebene haben möchte anstatt tief vergraben im DOM
		+
		+	<teleport to="#selector"></teleport>
		+
		+	Teleport benötigt '''das Attribut to''', in dem man einen CSS-Selector angibt, wo das Element eingehängt werden soll.
		+	<syntaxhighlight lang="html5">
		+	<teleport to="#app">
		+	<error-alert v-if="inputIsInvalid">
		+	<h2>Input is invalid</h2>
		+	<p>Please enter something.</p>
		+	<button @click="confirmModal">Okay</button>
		+	</error-alert>
		+	</teleport>
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 4. Januar 2021, 08:21 Uhr
Zeile 799:		Zeile 799:

	Hier wird die Komponente mit dem Namen der in der Variablen selectedComponent steckt angezeigt.		Hier wird die Komponente mit dem Namen der in der Variablen selectedComponent steckt angezeigt.
		+
		+	=== <keep-alive> component ===
		+	<syntaxhighlight lang="html5">
		+	<keep-alive>
		+	<component v-bind:is="selectedComponent"></component>
		+	</keep-alive>
		+	</syntaxhighlight>
		+	KeepAlive ist eine Vue-Interne Komponente, die oft mit dynamischen Komponenten in Verbindung eingesetzt wird. Da Komponenten wenn sie nicht mehr benötigt werden aus dem DOM entfernt werden, sind auch User-Inhalte wie die Eingabe in einem Input Feld gelöscht, wenn sie später wieder angezeigt werden.
		+
		+	Wrapt man die Komponente mit keep-alive werden die Inhalte vor dem Löschen gecacht und können später wieder hergestellt werden.

← Nächstältere Version		Version vom 4. Januar 2021, 08:09 Uhr
Zeile 792:		Zeile 792:

	Im Template Tag kann man den Slot (hier default auslesen und in eine beliebige Variable (hier myProps) schreiben. '''Hinweis:''' in aktuellen Vue Versionen kann man camelCase Schreibweise nutzen und Vue konvertiert automatisch.		Im Template Tag kann man den Slot (hier default auslesen und in eine beliebige Variable (hier myProps) schreiben. '''Hinweis:''' in aktuellen Vue Versionen kann man camelCase Schreibweise nutzen und Vue konvertiert automatisch.
		+
		+	== Dynamic Components <component> ==
		+	Mit dem '''component Tag und dem is Attribut''' kannst du Komponenten dynamisch anzeigen. Das heißt an der Stelle von <component> können unterschiedliche Komponenten angezeigt werden.
		+
		+	<component v-bind:is="selectedComponent"></component>
		+
		+	Hier wird die Komponente mit dem Namen der in der Variablen selectedComponent steckt angezeigt.

@@ Zeile 776: / Zeile 776: @@
+}
 </script>
 Und sie in der Elternkomponente auswerten.
-</syntaxhighlight>
 '''Main App'''
 <syntaxhighlight lang="html5">

@@ Zeile 756: / Zeile 756: @@
 Du kannst einfach im Slot Tag Attribute definieren, die dann in einem Objekt in der Eltern Komponente genutzt werden können:
 <syntaxhighlight lang="html5">
 <template>
@@ Zeile 776: / Zeile 778: @@
 Und sie in der Elternkomponente auswerten.
 </syntaxhighlight>
-Main App:
+'''Main App'''
 <syntaxhighlight lang="html5">
      <course-goals>

@@ Zeile 753: / Zeile 753: @@
+     }
 === scoped Slots ===
-Todo
+Scoped Slots erlauben es Daten vom Slot der Komponente zur Parent App zu übertragen.