2021-01-08T21:52:38Z

37.49.72.8: Die Seite wurde neu angelegt: „== Cloud Hosting == https://t3n.de/news/cloud-hosting-anbieter-vergleich-865048/ Vielleicht auch noch interessant: Kamatera https://docs.hetzner.com/de/kons…“

== Cloud Hosting ==
https://t3n.de/news/cloud-hosting-anbieter-vergleich-865048/
Vielleicht auch noch interessant:
Kamatera
https://docs.hetzner.com/de/konsoleh/server-management/faq/installation-of-common-software/#nodejs
Netcup: https://www.netcup.de/vserver/reseller_angebote_vserver.php
https://de.hostadvice.com/hosting-services/cheap-nodejs-hosting/
fastcomet managed cloud lösungen

NodeJS

2021-01-08T21:24:18Z

37.49.72.8: /* Links */

== Links ==

https://nodejs.org/en/
[[Webentwicklung mit NodeJS]]
https://www.febas.de/support-nodejs/ - nodejs webapps auf normalem webhosting (ungetestet)

== Einleitung ==
NodeJS oder node.js bietet '''Serverseitiges JavaScript''' für '''performante WebApps'''. Es basiert auf Googles V8 JavaScript Engine.
Damit kommt man vom http Protokoll weg und kann z.B. kleine Server für Multiuserspiele oder Apps für gemeinsamen Zugriff auf Dokumenter bauen. Allerdings unterstützen nicht alle Hoster NodeJS.

Es gibt viele Tools, vor allem bei der Entwicklung von HybridApps und Webapps, die das nutzen können.

Auf dem Mac liegt Node normalerweise in:
/usr/local/bin/node

== Installation ==

Entweder über den [[Homebrew Paketmanager für Mac OS X|Paketmanager brew]] oder über den obigen Link runterladen
Installer installiert npm und node.js

HINWEIS: Wenn du ohnehin Homebrew nutzt, dann auch NodeJS über Homebrew installieren, sonst kann es später Probleme mit Homebrew geben, weil beide das Verzeichnis /usr/local/include/ nutzen.

Mit brew:
brew install node

<pre>
This package will install:
• Node.js v8.11.3 to /usr/local/bin/node
• npm v5.6.0 to /usr/local/bin/npm
</pre>

== Node Packet Manager ==
Node enthält den [[npm]] = Node Paket Manager, er dient als command line tool für viele JavaScript basierte Tools, z.b. Cordova,

[[npm]] was installed at
/usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

== Tools die mit Node laufen ==
=== Jade Template Engine ===
Hinweis: Mittlerweile wurde Jade zur [[Pug Template Engine]]
Jade ist eine auf node basierte HTML Template Engine, mit der man vereinfachtes html schreiben kann, das dann on the fly in html übersetzt wird. Damit kann man sehr schnell Code entwickeln.

https://t3n.de/news/jade-638027/
[[Jade Template Engine]]

npm install jade --global

=== Bower ===
Im Zusammenhang mit NodeJS steht [[Bower]]. Es ist eine unter node.js laufende '''Paketverwaltung, spezialisiert auf Webentwicklung'''. Damit lassen sich diverse Tools wie Angular.js oder Frameworks schnell laden oder daraus ein Grundprojekt erstellen.

=== Gulp ===
* http://gulpjs.com/
* http://magazin.phlow.de/webdesign/gulp/
* https://www.liechtenecker.at/front-end-workflow-mit-gulp/

Ein weiteres Tool das unter Node.js läuft ist [[Gulp]]. Gulp ist ein Taskrunner (wie auch Grunt) und dient vor allem zu folgendem.
* '''Bilder''' – Verlustlose Kompression aller Bilder und Vektoren mit gulp-imagemin
* '''HTML – Minifizierung''' von mit gulp-minify-html
'''Javascript'''
* '''Überprüfung''' mit ''gulp-jshint''
* '''Zusammenfassen''' Javascripte mit ''gulp-concat''
* '''Minifizierung''' Javascripts mit ''gulp-uglify''
CSS
* Konvertierung der '''Sass'''-Datei in eine CSS-Datei mit ''gulp-sass''
* '''Autoprefixer''', um alle Vendor Prefixes zu überprüfen mit ''gulp-autoprefixer''
* '''Minifizierung''' der CSS-Datei mit ''gulp-minify-css''
* '''Kopieren''' aller Dateien in einen Ordner für den Upload
* '''Überwachung''' von Dateien auf mögliche Änderungen

[[Gulp]]

=== Grunt ===
Mit Grunt '''automatisiert man sich wiederholende Aufgaben bei der Webentwicklung'''. Grunt ist ein JavaScript-basierter Taskrunner und hilft unter anderem bei der Code-Minifizierung, Code-Kontrolle, Kompilierung, Unit Testing und so weiter.

Es ist damit '''ähnlich angesiedelt wie Gulp'''. Allerdings scheint der Einstieg mit Gulp einfacher zu sein und das Konzept schlüssiger.

== Hello World App ==
How do I start with Node.js after I installed it?

Once you have installed Node, let's try building our first web server. Create a file named "app.js", and paste the following code:
<syntaxhighlight lang="javascript">
const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
</syntaxhighlight>
After that, run your web server using node app.js, visit
http://localhost:3000
, and you will see a message 'Hello World'

== NodeJS deinstallieren ==
=== NodeJS manual uninstall ===
Evtl. notwendig wenn man es späteer mit homebrew erledigen will.
<pre>
Note that not all of the directories listed here may exist on your system depending on your install method.

Delete node and/or node_modules from /usr/local/lib
Delete node and/or node_modules from /usr/local/include
Delete node, node-debug, and node-gyp from /usr/local/bin
Delete .npmrc from your home directory (these are your npm settings, don't delete this if you plan on re-installing Node right away)
Delete .npm from your home directory
Delete .node-gyp from your home directory
Delete .node_repl_history from your home directory
Delete node* from /usr/local/share/man/man1/
Delete npm* from /usr/local/share/man/man1/
Delete node.d from /usr/local/lib/dtrace/
Delete node from /opt/local/bin/
Delete node from /opt/local/include/
Delete node_modules from /opt/local/lib/
Delete node from /usr/local/share/doc/
Delete node.stp from /usr/local/share/systemtap/tapset/
</pre>

Smart Home

2021-01-08T20:58:48Z

37.49.72.8:

Im Bereich Smart Home gibt es zahlreiche Anbieter und Protokolle. Problematisch ist, dass für die Steuerung über das Internet meistens externe Accounts auf den Servern der Anbieter notwendig sind. In diesem Artikel soll es sich darum drehen ein komplett autarkes eigenes Smart Home System aufzubauen.

In der Praxis hat man meist ein internes Protokoll für die Steuerung der Geräte (z.B. ZigBee) und für die externe Steuerumg ein weiteres System. Dazwischen benötigt man ein Gateway.

== Links ==
https://www.youtube.com/watch?v=1RV6ZiP79lk Heise Video zum Thema
https://nodered.org/
https://iot.mozilla.org/
https://blog.mozilla.org/berlin/wie-du-dein-eigenes-privates-smart-home-einrichtest/

== Haussteuerung ==
=== ZigBee ===
Verbreitetes Funkprotokoll z.b. für Phillips Hue...
=== mqtt ===
Verbreitetes Protokoll zum verteilen von Nachrichten. Stateless ähnlich wie http.

== Tools für die externe Steuerung (Gateway) ==
=== Node Red ===
https://www.youtube.com/watch?v=1RV6ZiP79lk
Grafische Oberfläche bei der man sich die Nodes in einem Flussdiagramm zusammenstellen lassen. Hat einen Industriebackground und ist daher robust und es gibt viele Plugins und Module für Anbindungen. Auch eigene Erweiterungen sind möglich.

=== Open Hub ===
=== FEHM ===
FHEM (R) ist ein in Perl geschriebener, GPL v2 lizensierter Server für die Heimautomatisierung. Man kann mit FHEM häufig auftretende Aufgaben automatisieren, wie z.B. Lampen / Rollladen / Heizung / usw. schalten, oder Ereignisse wie Temperatur / Feuchtigkeit / Stromverbrauch protokollieren und visualisieren.

Das Programm läuft als Server, man kann es über WEB, dedizierte Smartphone Apps oder telnet bedienen, TCP Schnittstellen für JSON und XML existieren ebenfalls.

Um es zu verwenden, benötigt man einen 24/7 Rechner (NAS, RPi, PC, MacMini, etc) mit einem Perl Interpreter und angeschlossene Interfaces wie CUL-, EnOcean-, Z-Wave-USB-Stick etc. für einen Zugang zu den Aktoren und Sensoren.
https://wiki.fhem.de/wiki/Hauptseite

Smart Home

Vue.js

2021-01-07T16:13:51Z

37.49.72.8: /* Links */

== Einführung ==
Vue ist ein gutes Framework für WebApps, kann aber auch nur zum Teilrendering eingesetzt werden. Behalte im Blick das Webapps aus Quellcode Sicht problematisch für die Suchmaschinen ist.

Wenn du nicht unbedingt eine Webapp bauen möchtest aber gerne einige Features von Vue nutzen möchtest (2-way-binding...) ist evtl. alpine.js nützlich)
[[alpine.js]] - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht.

== Links ==
[[Vue.js]]
[[Vue - Basic Concepts]]
[[Vue CLI]]
[[Vue - Components]]
[[Vue - Routing]]
[[Vue - Snippets]]

== Vue In Depth ==
=== Basic Concepts ===
[[Vue - Basic Concepts]]
=== CLI & Arbeitsumgebung ===
[[Vue CLI]]
=== Components ===
[[Vue - Components]]

== Vue Templates ==
=== Interpolation and Directives ===
==== Text Interpolation ====
Die einfachste Form der Interpolation ist Text-Interpolation. Hier wird einfach ein String der in der Component Logic ist ausgegeben. Die Ausgabe erfolgt wenn man den Variablennamen in '''doppelte geschweifte Klammern''' setzt. Das geht allerdings '''nicht in HTML Attributen'''. In Attributen nutzt man v-bind.

Beispiel:
'''App.vue'''
<syntaxhighlight lang="html5">
<template>
<div id="app">
<Skills/>
</div>
</template>

<script>
import Skills from './components/Skills.vue'

export default {
name: 'app',
components: {
Skills
}
}
</script>

<style>
</style>
</syntaxhighlight>

'''Skills.vue'''
<syntaxhighlight lang="html5">
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
name: 'Skills',
data(){
return{
name: 'Stephan'
}
}
}
</script>

<style scoped>
</style>
</syntaxhighlight>
==== Interpolation in Attributen ====
Boolean Interpolation ,ann man gut für Buttons verwenden. Wir verwenden eine um den Zustand eines Buttons zu verwalten.

Im Templateteil fügen wir hinzu:
<button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>
Hier sehen wir auch schon zwei Direktiven von View nämlich v-on und v-bind. Erläuterung folgt später.

Im Skriptteil fügen wir nach der name Eigenschaft eine weitere vom Typ Boolean hinzu:
<pre>
name: 'Stephan',
btnState: true
</pre>
Wichtig nun: Hier verwenden wir die Eigenschaft btnState in einem Attribut. Hier kann man keine geschweiften Klammern verwenden, aber Vue erkennt automatisch die Variable.

==== Expressions (Ausdrücke) in Interpolation verwenden ====

Man kann auch Conditionals nutzen. Basierend auf dem Code oben fügen wir im Template Teil der Komponente hinzu:
<pre>
{{ btnState ? 'Button ist aktiv' : 'Button ist deaktiviert'}}
</pre>
Das gibt Button ist deaktiviert aus, da btnState ja auf true steht.

=== Direktiven ===
Oben haben wir schon zwei Direktiven geseehen, die ein Event festlegen und Binden. Folgende Direktiven gibt es:
<pre>
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once
</pre>
==== Beispiel Direktive v-for ====
In der Component Skills.vue im Template-Teil
<syntaxhighlight lang="html5">
<div class="skills">
<div class="holder">
<ul>
<li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
</ul>
</div>
</div>
</syntaxhighlight>
und im Script Teil...
<syntaxhighlight lang="html5">
export default {
name: 'Skills',
data(){
return{
name: 'Stephan',
btnState: true,
skills: [
{ "skill": "Radfahren" },
{ "skill": "Schwimmen" }
]
}
}
}
</syntaxhighlight>
==== v-if v-else ====
<pre>
<p v-if="skills.length >= 1">You have more than 1 skill</p>
<p v-else>You have less than or equal to 1 skill</p>
</pre>
== Styles und Class Binding ==
=== Externe CSS Files einbinden ===
<style src="./Skills.css" scoped>
</style>
=== Class Binding ===
in skills.js
<div v-bind:class="{ alert: showAlert}"></div>
Setzte die Klasse ''.alert'', aber '''nur wenn showAlert true ist'''.
<pre>
data() {
return {
... ,
showAlert: true // Add this
}
},
</pre>
Definiert die Eigenschaft ''showAlert''

Dann noch den Style damit wir etwas sehen können:
<pre>
<style scoped>
.alert {
background-color: yellow;
width:100%;
height: 30px;
}
</style>
</pre>

Auch der '''Not Operator''' funktioiniert:
{ alert: !showAlert}

Mehrere Klassen und ifs kann man zusammenfassen. Hier wird another-class über die Property showClass gesetzt (in Anführungszeichen wegen dem minus):
<div v-bind:class="{ alert: showAlert, 'another-class': showClass }"></div>
==== Variante v-bind:class mit Objekt ====
Man kann den HTML Code sauberer halten, wenn man als Klassenname ein Objekt einsetzt und die Klasse in der Logic implementiert:
Template
<div v-bind:class="alertObject"></div>
Logic Teil:
<pre>
data() {
return {
skills: [
{ "skill": "Vue.js" },
{ "skill": "Frontend Developer" }
],
alertObject: {
alert: true,
// More classes here if you want..
}
}
},
</pre>

==== Style Attribut steuern mit Vue Style Binding ====
Template Teil
<div v-bind:style="{ backgroundColor: bgColor, width: bgWidth, height: bgHeight }"></div>
Logic Teil
<pre>
data() {
return {
skills: [
{ "skill": "Vue.js" },
{ "skill": "Frontend Developer" }
],
bgColor: 'yellow',
bgWidth: '100%',
bgHeight: '30px'
}
},
</pre>

oder besser als Objekt:
Template Teil
<div v-bind:style="alertObject"></div>

Logic Teil
<pre>
alertObject: {
bgColor: 'yellow',
bgWidth: '100%',
bgHeight: '30px'
}
</pre>
Hinweis: Wir erkennen Objekte in der Regel an den Geschweiften (Wigley) Klammern {}

== User Input und das v-model ==
... z.B. von Formularen wird vom Template an die Logic weitergereicht, verarbeitet und das Ergebnis wieder ans Template übergeben.

=== Ein Input Feld ===
In Skills.vue

Template Section:
<input type="text" placeholder="Enter a skill you have.." v-model="skill">
{{ skill }}
Logic Section:
<pre>
data(){
return{
skill: '',
skills: [
...
</pre>
Interessant hier: schon beim eingeben wird {{skill}} befüllt

=== Methoden ===
Wir erweitern das Ganze und Implementieren zum ersten Mal eine Methode.

== Plugins ==
=== Einbinden ===
Todo
=== Interessante Plugins ===
* vee-validate

Vue - Snippets

2021-01-07T16:00:42Z

37.49.72.8: /* Send Receive REST Data */

Vue - Snippets

2021-01-07T15:57:15Z

37.49.72.8: /* Send Receive REST Data */

== Links ==
[[Vue.js]]
[[Vue - Basic Concepts]]
[[Vue CLI]]
[[Vue - Components]]

== Snippets ==
=== Starters ===
<syntaxhighlight lang="javascript">
const app = Vue.createApp({
data(){
return{
}
},
methods:{
},
computed:{
},
watch:{
}
});
app.mount('#assignment');
</syntaxhighlight>

==== Starter mit main.js (CLI) ====
<syntaxhighlight lang="javascript">
import { createApp } from 'vue';
// Import Main App
import App from './App.vue';
// Import Global Components
import BaseBadge from './components/BaseBadge.vue';
import BaseCard from './components/BaseCard.vue'
// Create App Instance
const app = createApp(App);
// Register Components
app.component('base-badge', BaseBadge);
app.component('base-card', BaseCard)
// Mount App
app.mount('#app');

</syntaxhighlight>

=== Using this in a submethod i.e. Timer ===
<syntaxhighlight lang="javascript">
watch:{
// it is allowed to watch computed properties
result(value){
const that = this;
setTimeout(function(){
console.log("timeout");
that.counter = 0;
return 0;
},3000);
}
}
</syntaxhighlight>

=== Toggle Classes ===
<syntaxhighlight lang="javascript">
//...
data(){ return { boxSelected: false } },
methods:{ toggleBox(){ this.boxSelected = !this.boxSelected; } }
//...
</syntaxhighlight>

<syntaxhighlight lang="html5">
<div @click="selectBox()" class="box" :class="{ active : boxSelected }"></div>
</syntaxhighlight>

=== Add and remove items to / from a list ===
<syntaxhighlight lang="javascript">
const app = Vue.createApp({
data() {
return {
enteredGoalValue: '',
goals: []
};
},
methods: {
addGoal() {
this.goals.push(this.enteredGoalValue);
this.enteredGoalValue = '';
},
removeGoal(i){
console.log("removeGoal " + i)
this.goals.splice(i,1); // splice 1 item at index i
}
}
});
app.mount('#user-goals');
</syntaxhighlight>

<syntaxhighlight lang="html5">
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="enteredGoalValue" />
<button @click="addGoal">Add Goal</button>
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<li v-for="(goal, i) in goals" @click="removeGoal(i)" :key="[myID]">#{{i}} {{goal}}</li> // use a unique id for key attribute
</ul>
</section>
</syntaxhighlight>

=== Components ===
==== Component Todos ====
'''Mit CLI'''
* myComponent.vue Datei erstellen
* In main.js Import und component Funktion
* In App.vue Import
* In myComponent.vue props, emits festlegen
* In App.vue emits als v-on nutzen
* In App.vue props als Argumente übergeben
==== Basic Component ====
Parent
<syntaxhighlight lang="html5">
<template>
<h1>My App</h1>
<ul>
<learning-resource v-for="res in storedResources"
:key="res.id"
:title="res.title"
:description="res.description"
:link="res.link">
</learning-resource>
</ul>
</template>
<script>
import LearningResource from './components/learning-resources/LearningResource.vue'

export default {
components:{
LearningResource,
},
data(){
return {
storedResources: [
{
id: 'official-guide',
title: 'Official Guide',
description: 'The official Vue.js documentation',
link: 'https://vuejs.org'
},
{
id: 'google',
title: 'Google',
description: 'Search for other things...',
link: 'https://google.de'
},
]
}
}
}
</script>
</syntaxhighlight>

Child
<syntaxhighlight lang="html5">
<template>
<li>
<h3> {{ title }} </h3>
<p> {{ description }} </p>
<nav>
<a :href="link">View resource</a>
</nav>
</li>
</template>
<script>
export default {
props: ['title', 'description', 'link']
}
</script>
</syntaxhighlight>

=== Slots ===
Basic Slot

'''App.vue'''
<syntaxhighlight lang="html5">
</syntaxhighlight>

=== Send Receive REST Data ===

<syntaxhighlight lang="javascript">
loadExperiences() {
this.isLoading = true;
this.error = null;
fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json')
.then( (response) => {
// is executed when data arrived. Arg response is provided automatically.
if (response.ok) {
return response.json(); // parse json data and return promise
}
})
.then( (data) => {
// executed when promise returned
// hint if we would use function(data) instead of arrow function
// the keyword this would not work
this.isLoading = false;
console.log('Received Data: ');
console.log(data);
const results = [];
for( const id in data){
results.push({ id: id, name: data[id].name, rating: data[id].rating})
}
this.results = results;
})
.catch(
// catch will be triggered when an error in any of the previous promises occurs
// argument error is provided automatically in the function
(error) => {
console.log('Error' + error);
this.isLoading = false;
this.error = 'Failed to fetch data: ' + error;
}
);
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
submitSurvey() {
if (this.enteredName === '' || !this.chosenRating) {
this.invalidInput = true;
return;
}
this.invalidInput = false;

// this.$emit('survey-submit', {
// userName: this.enteredName,
// rating: this.chosenRating,
// });
this.error = null;
fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: this.enteredName,
rating: this.chosenRating
}),
})
.then( response => {
if (response.ok) {
console.log("We got a valid response from server: " + response);
}else{
throw new Error('Could not save data');
// this creates new Error Object which we receive in catch()
}
})
.catch(error => {
console.log(error);
this.error = error.message;
});

this.enteredName = '';
this.chosenRating = null;
}
</syntaxhighlight>

=== Utilities / nützliche Funktionen ===
Normale JavaScript Funktionen die oft nützlich im Zusammenhang mit Vue sind.

Siehe [[JavaScript - Snippets]]

==== Arrays ====
===== Elemente hinzufügen / entfernen =====
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]
<syntaxhighlight lang="javascript">

// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id (will not work with provide/inject data in components)
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}
// this works because we change the array directly
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

===== Finden und Suchen =====
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

===== Validierung =====
<syntaxhighlight lang="javascript">
submitData(){
const enteredTitle = this.$refs.titleInput.value;
if (enteredTitle.trim() === ''){
this.inputIsValid = false;
return;
}
</syntaxhighlight>

Authentication

2021-01-07T13:49:31Z

37.49.72.8: Die Seite wurde neu angelegt: „Infos zur Authentifizierung im IT Bereich ==2FA== Two factor authentication. https://thomas-leister.de/authentifizierungsverfahren-des-yubikeys-erklaert/“

Infos zur Authentifizierung im IT Bereich

==2FA==
Two factor authentication.
https://thomas-leister.de/authentifizierungsverfahren-des-yubikeys-erklaert/

Firebase

2021-01-06T13:56:32Z

37.49.72.8: Die Seite wurde neu angelegt: „Firebase ist ein Service von Google mit dem man auf einfache Weise ein Backend für Webservices erzeugen kann.“

Firebase ist ein Service von Google mit dem man auf einfache Weise ein Backend für Webservices erzeugen kann.

Vue - Components

2021-01-06T13:37:24Z

37.49.72.8: /* Custom Form Control */

Siehe auch
[[Vue.js]]
[[Vue CLI]]

Components sind '''wiederverwendbare Logikbausteine'''. Du kannst damit z.B. Logik so Kapseln, dass sie nicht durch andere Ereignisse oder Eigenschaften beeinflusst wird.

Durch die Aufteilung einer großen App in kleinere Bausteine wird sie weniger fehleranfällig und leichter wartbar und die Entwicklung gerade bei größeren Apps effektiver.

Eine Component sieht im Template '''wie ein neuer Tag''' aus. Damit es keine '''Namenskonflikte''' gibt verwendest Du als Name am Besten eine Bezeichnung mit zwei Worten und Bindestrich <contact-details>. Dies kommmt bei normalen Tags nicht vor.

Definiert wird eine Komponente mit der component() Methode. Technisch gesehen ist eine Komponente eine '''App in einer App'''. Daher erzeugt man sie auch ganz ähnlich:

const app = Vue.createApp({ //... }) // creation of an app
app.component('single-contact', { //... }) // creation of a component in this app

Im ersten Argument definiert man den Namen über den später als Tag (<single-contact>) zugegriffen werden kann. Im zweiten Argument übergibt man ein Objekt, dass wiederum eigene data, methods... Objekte enthalten kann die aber nur für diese Komponente gelten.

== Component Template ==
Die Component ist also eine Art Mini-App in der Hauptapp. Sie benötigt wie eine App ein Template. Es gibt mehrere Möglichkeiten das Template zu übergeben.

=== template Object ===
<syntaxhighlight lang="javascript">
app.component('friend-contact', {
template: `
<li>
<h2>{{friend.name}}</h2>
<button @click="toggleDetails()">Show Details</button>
<ul v-if="detailsVisible">
<li><strong>Phone:</strong> {{friend.phone}} </li>
<li><strong>Email:</strong> {{friend.email}} </li>
</ul>
</li>
`,// backticks allow multiline code
</syntaxhighlight>

== Quickstart - Component mit CLI ==
Wenn man mit Components arbeitet bietet sich auch die Arbeit mit dem [[Vue CLI]] an. In Kurzform die Schritte die Du benötigst um eine Vue App und Komponenten zu nutzen.
'''Komponente erstellen:'''
* '''components/MyComponent.vue'''
** <template> Abschnitt
** <script>export default{}</script> Abschnitt
'''Komponente in Main App registrieren'''
* '''App.vue''' erstellen
** <template> und <script> wie oben erstellen
* '''main.js'''
** createApp wird beim Erstellen schon eingefügt
** Hauptapp (i.d.R. App.vue) importieren
** Config Oject der Komponenten importieren
** app Instanz über createApp erzeugen
** mit Funktion components in App Instanz registrieren
** App mounten
''' Daten aus Main App senden '''
* Daten definieren und im custom-tag binden
* in der Komponente als props nutzen
''' Daten aus Komponente an Main App senden '''
* data() der App definieren
* Funktion mit this.$emit('my-emitter') definieren
* Optional (good practice) in emits: ['my-emitter] listen
main.js
<syntaxhighlight lang="javascript">
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';
// ...

const app = createApp(App);
app.component('my-component', MyComponent); // always use dashed names thus they can't clash with existing html names
// ...
app.mount('#app');
</syntaxhighlight>

'''App.vue'''
<syntaxhighlight lang="html5">
<template>
<h1>The App</h1>
<my-component></my-component>
</template>

<script>
import MyComponent from './components/MyComponent.vue'
export default {
components: {
ActiveUser,
UserData
}
}
</script>
</syntaxhighlight>

<syntaxhighlight lang="html5">
<template>
</template>
<script>
export default {

}
</script>
<style>
</style>
</syntaxhighlight>

== Single File Components mit Vue CLI ==
Wenn man größere Apps bauen und effektiv mit Components arbeiten möchte hilft das Vue CLI und ein Development Setup mit Node.js und npm. Die folgenden Beispiele nutzen Single File Components. Schau unter
[[Vue CLI]]
nach wenn du nicht weißt wie man ein solches Setup aufbaut.

== Component Communication ==
=== Parent - Child Communication mit props ===
https://v3.vuejs.org/guide/component-props.html

'''Mit props sendest Du Daten von der Parent App an die Child Component.'''

'''App.vue - <template> der Eltern App.'''
<syntaxhighlight lang="html5>
<ul>
<friend-contact
name="Stephan"
phone-number="123"
email-address="my@email.tld">
</friend-contact>
<friend-contact
name="Finn"
phone-number="345"
email-address="my@mymail.tld">
</friend-contact>
</ul>
</syntaxhighlight>

'''FriendContact.vue - <script> - Child App'''
<syntaxhighlight lang="javascript">
props:[
'name', 'phoneNumber', 'emailAddress'
],
</syntaxhighlight>

'''FriendContact.vue - <template>'''
<syntaxhighlight lang="html5>
<h2>{{name}}</h2>
<button @click="toggleDetails"> {{detailsVisible ? 'Hide' : 'Show'}} Details </button>
<ul v-if="detailsVisible">
<li><strong>Phone: </strong>{{phoneNumber}}</li>
<li><strong>Email: </strong>{{emailAddress}}</li>
</ul>
</syntaxhighlight>

Das '''props Objekt in der Komponente''' definiert welche Attribute die Komponente akzeptiert und erwartet. Im der Parent App übergibt man die Daten für diese props einfach als Attribute.
* werden in props der component als ''camelCase'' , stehen aber als ''kebab-case'' im HTML zur Verfügung (du solltest sie auch so verwenden)
* props stehen mit ''this.myProp'' auch in Methoden etc. zur Verfügung

==== Unidirectional Data Flow ====
Daten die an die Kind App übertragen werden '''dürfen nicht mehr verändert werden'''.

Beispiel: Wenn Du eine prop isFavourite hast und Sie über einen Toggle Button verändern willst kannst du das nicht in der Child App verändern weil die Daten nur von Parent nach Child fließen dürfen. Vue gibt einen Fehler aus.

Es gibt zwei Strategien die man anwenden kann:
* Daten zurück an Parent übertragen (siehe unten)
* Daten nutzen um eine Komponentenvariable zu initialisieren und diese verändern.

==== Props Object ====
Anstatt einem Array kann man auch Objekte übertragen. Darin kann man einige '''Zusatzinformationen''' unterbringen. Das ist vor allem bei großen Projekten vlt. mit mehreren Programmierern sinnvoll um Komponenten zuverlässiger zu machen. Die zusätzlichen Properties sind festgelegt: type, required

<syntaxhighlight lang="javascript">
props:['name', 'phoneNumber', 'emailAddress'], // Array
props:{ name: String, phoneNumber: String, emailAddress: String, }, // Object mit Type
props:{
name: { type: String, required: false},
isFavourite: {
type: String,
required: false,
default: '0', // could also be a function: function(){ return: '1'},
validator: function(value){ return value === '0' || value === '1' }
}
}
</syntaxhighlight>
Mit den zusätzlichen Infos kann vue in der Konsole Fehler ausgeben oder du kannst selber Auswertungen der Daten in der Komponente vornehmen. Erlaubte Types sind:
String, Number, Boolean, Array, Object, Date, Function, Symbol
But type can also be any constructor function (built-in ones like Date or custom ones).

==== Props mit dynamischen Daten nutzen ====
Um Props dynamisch zu nutzen kann man sie einfach mit v-bind (oder : ) an Daten binden und mit v-for durchlaufen. Plicht ist jetzt das key Attribut in die man eine eindeutige id geben muss.

'''App.vue:'''
<syntaxhighlight lang="javascript">
//...
friends:[
{
id: 'yvonne',
name: 'Yvonne Oßwald',
phone: '49 123 456',
email: 'post@yvonneosswals.de',
isFavourite: false
},
//...
</syntaxhighlight>

'''in <template>'''
<syntaxhighlight lang="html5">
<ul>
<friend-contact
v-for="friend in friends"
:key="friend.id"
:name="friend.name"
:phone-number="friend.phone"
:email-address="friend.email">
</friend-contact>
</ul>
</syntaxhighlight>

Die Komponente
<syntaxhighlight lang="html5">
<li>
<h2>{{name}} {{friendIsFavourite ? '(*)' : ''}}</h2>
<button @click="toggleFavourite">Toggle Favourite</button>
<button @click="toggleDetails"> {{detailsVisible ? 'Hide' : 'Show'}} Details </button>
<ul v-if="detailsVisible">
<li><strong>Phone: </strong>{{phoneNumber}}</li>
<li><strong>Email: </strong>{{emailAddress}}</li>
</ul>
</li>
</syntaxhighlight>
<syntaxhighlight lang="javascript">
props:{
name: String,
phoneNumber: String,
emailAddress: String,
isFavourite: {type: Boolean, required: false, default: false}
},
</syntaxhighlight>

==== Fallthrough props - $attr Objekt ====
Angenommen Du hast eine BaseButton.vue Komponente ohne definierte Props.
'''Im Parent kannst Du trotzdem Attribute und Events''' nutzen...
<base-button type="submit" @click="doSomething">Click me</base-button>
... und diese dann '''in der Komponente auswerten'''.
Dafür hat vue ein spezielles $attrs Objekt auf das Du mit
this.$attrs
zugreifen kannst. Dies kann z.b. bei Komponenten mit nur geringer Funktionalität nützlich sein, die eher zur reinen Ausgabe dienen.

==== Fallthrough props - root Element ====
Fallthrough Properties ermöglichen es Properties und Events in Komponenten zu nutzen.

Wenn man Properties oder Events in einer Komponente nutzt werden Sie von Vue automatisch per default auf das Root Element angewendet.

Einsatz der BaseButton Komponente
<syntaxhighlight lang="html5">
<template>
<base-button @click="setSelectedTab('add-resource')">Add Resource</base-button>
</template>
</syntaxhighlight>

Der click Listener wird hier automatisch auf das Root Element der Button Komponente angewendet - nämlich den button tag.

Definition der BaseButton Komponente:
<syntaxhighlight lang="html5">
<template>
<button :type="type" :class="mode">
<slot>Label goes here</slot>
</button>
</template>
</syntaxhighlight>

==== Alle props in einem Objekt binden ====
Angenommen deine Komponente sieht etwas so aus:

'''UserData.vue'''
<syntaxhighlight lang="html5">
<template>
<h2>{‌{ firstname }} {‌{ lastname }}</h2>
</template>

<script>
export default {props: ['firstname', 'lastname'] }
</script>
</syntaxhighlight>

Anstatt alle Props einzeln zu übertragen kannst du auch ein Übergeordnetes Objekt definieren und dieses übertragen.

'''App.vue'''
<syntaxhighlight lang="javascript">
data() {
return {person: { firstname: 'Max', lastname: 'Muster' } };
}
</syntaxhighlight>
<syntaxhighlight lang="html5">

<user-data :firstname="person.firstname" :lastname="person.lastname"></user-data>

<user-data v-bind="person"></user-data>
</syntaxhighlight>

=== Child - Parent Communication mit custom Events ($emit) ===

'''Mit custom Events sendest du Daten von einer Komponente zurück an die Parent app.'''
Parent App -- [v-bind data] --> Component -- [custom Event data] -->
* Custom Events definierst du mit $emit in der Komponente
* In der Parent App nutzt du das Event im HTML Teil mit v-on

Wenn in einer Komponente Daten verändert werden muss man sie zurück zur Elternkomponente übertragen. Das Ändern der Props ist wegen dem unidirectional dataflow nicht erlaubt.

'''$emit()'''

Um Daten zurück zu senden können wir custom Events nutzen. Dazu gibt es die $emit Funktion
this.$emit('event-name', argument1, argument2, ...) // always use kebab-case
# in der Component in einer method this.$emit aufrufen z.b. this.$emit('toggle-state', this.id)
## id ist meist sinnvoll damit in der Parent App der Datensatz zugeordnet werden kann.
# im HTML der Eltern App einen v-on mit diesem Event anlegen z.B. @toggle-state="toggleState"
# in der gebundenen Methode in der Eltern App verarbeiten z.b. toggleState(id){ //ie. store in db }

Beispiel - es soll ein isFavourite Datum aus der Kindkomponente (Friendcontact.vue) gesetzt werden. Mit Klick auf den Button wird ein CustomEvent gesendet. Dieses wird in der Parent App ausgewertet und in den Daten gesezt. Über das v-bind in der Parent App wird es zurück in die h2 der Kind Komponente gesendet und diese aktualisiert.

'''FriendContact.vue'''
<syntaxhighlight lang="html">
<template>
<li>
<h2>{{name}} {{isFavourite ? '(*)' : ''}}</h2>
<button @click="toggleFavourite">Toggle Favourite</button>

</li>
</template>

<script>
export default {
props:{
id: {type: String, required: true},
//...
isFavourite: {type: Boolean, required: false, default: false}
},
emits:['toggle-favourite'], // emits object is optional and just for documentation purpose
methods:{
toggleFavourite(){
this.$emit('toggle-favourite', this.id);
}
}

}
</script>
</syntaxhighlight>
'''App.vue'''
<syntaxhighlight lang="html">
<template>
<section>
<header><h1>My Friends</h1></header>
<ul>
<friend-contact
v-for="friend in friends"
:key="friend.id"
:id="friend.id"
:name="friend.name"
//...
:is-favourite="friend.isFavourite"
@toggle-favourite="toggleFavouriteState">
</friend-contact>
</ul>
</section>
</template>

<script>
import FriendContact from './components/FriendContact.vue'
export default {
components: {
FriendContact
},
data(){
return {
friends:[
{
id: 'yvonne',
name: 'Yvonne Oßwald',
phone: '49 123 456',
email: 'post@yvonneosswals.de'
},
{
id: 'finn',
name: 'Finn Schlegel',
phone: '49 456 789',
email: 'post@finnschlegel.de' ,
isFavourite: true
},
]
}
},
methods:{
toggleFavouriteState(friendId){
const identifiedFriend = this.friends.find(
(friend) => friend.id === friendId // eq: function(friend){return friend.id...}
// this callback is executed on every friend (array item)
// first item match is returned
)
// identifiedFriend is a proxy which handles the origin array element of friends array
// thats why we can modify identifiedFriend and friends will be altered too
// console.log('identifiedFriend: ' + identifiedFriend.id)
identifiedFriend.isFavourite = !identifiedFriend.isFavourite
}
}
}
</script>
</syntaxhighlight>

=== provide und inject ===
Manchmal hat man eine Art "Passthrough" Komponenten.

Dies bedeutet, dass diese Komponenten keine eigene Logik für eingehende props oder ausgehende emits zur Verfügung stellen sondern diese nur an die nächste Ebene (props an die Kind-Komponente und emit an die Elternelemente weitergeben.

Beispiel:

'''App.vue'''
<syntaxhighlight lang="html5">
<template>

<knowledge-base :topics="topics" @select-topic="activateTopic"></knowledge-base>

</template>
<script>
export default {
data() {
return {
topics: [
{
id: 'basics',
title: 'The Basics',
description: 'Core Vue basics you have to know',
fullText:
'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
},
{
id: 'components',
title: 'Components',
description:
'Components are a core concept for building Vue UIs and apps',
fullText:
'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
},
],
activeTopic: null,
};
},
methods: {
activateTopic(topicId) {
this.activeTopic = this.topics.find((topic) => topic.id === topicId);
},
},
};
</script>
</syntaxhighlight>

'''KnowledgeBase.vue'''
Hier werden die Props und das event quasi nur durchgeleitet.
<syntaxhighlight lang="html5">
<template>
<knowledge-grid :topics="topics" @select-topic="$emit('select-topic', $event)"></knowledge-grid>
</template>
<script>
export default { props: ['topics'], emits: ['select-topic'],};
</script>
</syntaxhighlight>

'''KnowledgeGrid.vue'''
Hier werden die Props zwar in der for Schleife genutzt, das select-topic event wird durchgeleitet.
<syntaxhighlight lang="html5">
<template>
<knowledge-element
v-for="topic in topics"
:key="topic.id"
:id="topic.id"
:topic-name="topic.title"
:description="topic.description"
@select-topic="$emit('select-topic', $event)"
></knowledge-element>
</template
<script>
export default { props: ['topics'], emits: ['select-topic']};
</script>
</syntaxhighlight>

'''KnowledgeElement.vue'''
Hier wird schließlich das Event select-topic erzeugt.
<syntaxhighlight lang="html5">
<button @click="$emit('select-topic', id)">Learn More</button>
</syntaxhighlight>

==== provide und inject eine Eigenschaft ====
Mit dem Provide Objekt kannst du Properties bereitstellen und mit inject in einer anderen Komponente nutzbar machen. Hinweis: Du kannst nur '''in Richtung der Kindelemente''' injecten. Im Beispiel oben möchten wir die topics direkt zu KnowledgeGrid.vue senden. Das geht folgendermaßen
* provide Object in App.vue hinzufügen und Daten hinzufügen
* statt dem props Object die Daten mit inject nutzen
In App.vue ergänzen wir die configuration objects um das provide object (z.b. unter dem data) object
<syntaxhighlight lang="javascript">
//..
provide() {
return {topics:this.topics}
},
</syntaxhighlight>
Wir stellen also eine Eigenschaft "topics" zum injecten (nutzen) bereit. Der Name ist frei wählbar. Hier kopieren wir einfach das schon vorhandene topics Ojekt aus data. Man kann aber auch eigene Objekte definieren.

Um das jetzt in KnowledgeGrid zu nutzen müssen wir dort das inject Objekt nutzen. Es ersetzt in diesem Fall vollständig die props. Daher schreiben wir statt props einfach inject:
inject: ['topics'],

==== provide und inject für custom events ====
provide und inject funktionieren auch mit Methoden. So können einfach die Methode (oder besser den Zeiger auf eine Methode) injekten.
'''App.vue - provide object'''
selectTopic: this.activateTopic // point at the method
In KnowledgeElement injekten wir:
'''KnowledgeElement.vue'''
inject: ['selectTopic'],
und schreiben den button etwas um:
<button @click="selectTopic(id)">Learn More</button>
==== Komplettes Beispiel ====
App.vue
<syntaxhighlight lang="html5">
<template>
<div>
<active-element
:topic-title="activeTopic && activeTopic.title"
:text="activeTopic && activeTopic.fullText"
></active-element>
<knowledge-base></knowledge-base>
</div>
</template>

<script>
export default {
data() {
return {
topics: [
{
id: 'basics',
title: 'The Basics',
description: 'Core Vue basics you have to know',
fullText:
'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
},
{
id: 'components',
title: 'Components',
description:
'Components are a core concept for building Vue UIs and apps',
fullText:
'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
},
],
activeTopic: null,
};
},
provide() {
return {
topics: this.topics,
selectTopic: this.activateTopic // point at the method
}
},
methods: {
activateTopic(topicId) {
this.activeTopic = this.topics.find((topic) => topic.id === topicId);
},
},
// use a hook to simulate data changes
// this proves, that data in provide is updated too
mounted(){
setTimeout(
() => {
this.topics.push({
id: 'events',
title: 'Events',
description:
'Events are important in vue',
fullText:
'Events allow you to trigger code on demand.',
})
},
3000
)
}
};
</script>

<style>
/* styling goes here */
</style>
</syntaxhighlight>

'''KnowledgeBase.vue'''
<syntaxhighlight lang="html5">
<template>
<section>
<h2>Select a Topic</h2>
<knowledge-grid></knowledge-grid>
</section>
</template>

<script>
export default {
};
</script>
</syntaxhighlight>

'''KnowledgeGrid.vue'''
<syntaxhighlight lang="html5">
<template>
<ul>
<knowledge-element
v-for="topic in topics"
:key="topic.id"
:id="topic.id"
:topic-name="topic.title"
:description="topic.description"
></knowledge-element>
</ul>
</template>

<script>
export default {
inject: ['topics'],
};
</script>
</syntaxhighlight>

'''KnowledgeElement.vue'''
<syntaxhighlight lang="html5">
<template>
<li>
<h3>{{ topicName }}</h3>
<p>{{ description }}</p>
<button @click="selectTopic(id)">Learn More</button>
</li>
</template>

<script>
export default {
inject: ['selectTopic'], // we expect a function named selectTopic
props: ['id', 'topicName', 'description'],
emits: ['select-topic'],
};
</script>
</syntaxhighlight>

== Global / Local ==
Bisher haben wir Komponenten in main.js global registriert. Das ist sinnvoll bei "General Purpose Components" oder wenn Sie in vielen anderen Komponenten eingesetzt werden sollen.
Global
* Überall verfügbar, auch wenn nicht genutzt
* Muss beim ersten Aufruf der Seite vom Browser geladen werden (Performance)
main.js
import BaseBadge from './components/BaseBadge.vue';
const app = createApp(App);
app.component('base-badge', BaseBadge);
app.mount('#app');
Oft ist es besser Komponenten nur dort zu registrieren wo sie benötigt werden.
App.vue - <script>
<syntaxhighlight lang="javascript">
import TheHeader from './components/TheHeader.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';
export default {
components: {
TheHeader,
// or 'the-header': TheHeader,
// or TheHeader : TheHeader
BadgeList,
UserInfo,
},
</syntaxhighlight>
Diese Komponenten sind nur in App.vue verfügbar. Du kannst Sie natürlich über import auch in weiteren Komponenten nutzen.

=== scoped styling ===
Mit dem Attribut scoped werden Styles nur für die Komponente angewendet.
<style scoped>
Best practice: Globale Styles in App.vue

== Slots ==
Slots sind eine Art Wrapper für eine Kind-Komponente.

Komponenten können in einem Template nicht ineinander Verschachtelt werden. Manchmal möchte man aber genau das haben um z.B. ein gestyltes Element (z.b. eine Card) wiederverwenden zu können. Der Inhalt soll aber über eine andere Komponente gerendert werden. So kann man z.B. Styles gut wiederverewnden.
* Komponente registrieren (oft in main.js da man sie global haben möchte)
* <slot></slot> Tag in die Slot Komponente einfügen
* in der Kindkomponente einfach den custom Tag der Komponente als Wrapper nutzen
Für solche Zwecke gibt es Slots.
BaseCard.vue
<syntaxhighlight lang="html5">
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
div {
margin: 2rem auto;
max-width: 30rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
}
</style>
</syntaxhighlight>

ChildComponent.vue
<syntaxhighlight lang="html5">
<template>
<base-card>
<header>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</header>
<p>{{ infoText }}</p>
</base-card>
</template>

<script>
export default {
props: ['fullName', 'infoText', 'role'],
};
</script>

<style scoped>
div header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</syntaxhighlight>

So wie die props zum Transport von Daten dienen, so dienen die Slots zum Transport von dynamischem HTML Code zwischen den Komponenten.

=== Named Slots - v-slot===
Mit Named Slots kann man mehrere Slots nutzen, und damit auch komplexere Templates erzeugen. Dazu gibt es die Direktive '''v-slot'''. Wir nutzen zusätzlich das Standard HTML Tag <template> Das bietet sich an, da es keinen Inhat - also nicht mal eine Leerzeile - ausgibt.
v-slot:[slotname]
statt v-slot: kann man auch den Shortcut # nehmen:
#[slotname]

Beispiel BaseCard.vue
<syntaxhighlight lang="html5">
<template>
<div>
<header>
<slot name="headline"></slot>
</header>
<slot></slot>
</div>
</template>
...
</syntaxhighlight>
Kindkomponente
<syntaxhighlight lang="html5">
<template>
<base-card>
<template v-slot:headline>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</template>
<template v-slot:default>
<p>{{ infoText }}</p>
</template>
</base-card>
</template>
</syntaxhighlight>

=== Default Content für Slots ===
Du kannst default Inhalt anzeigen wenn die Kindkomponente keinen Inhalt für einen Slot hat.
<pre>
<slot name="headline">
<h2>This default fallback content be shown if no content is provided</h2>
</slot>
</pre>

=== v-if mit $slots ===
Manche Slots möchte man nur anzeigen wenn auch Inhalt dafür vorhanden ist. Ansonsten soll auch das umgebende Tag nicht ausgegeben werden. Dies kann man mit v-if und der $slots Variablen erreichen.

$slots enthält die Daten für einen aktuellen Slot. Das Nutzen wir über ein v-if:
<syntaxhighlight lang="html5">
<header v-if="slots.headline">
<slot name="headline">
</slot>
</header>
</syntaxhighlight>
So wird die headline nur ausgegeben, wenn sie auch vorhanden ist.

Tipp: Den Inhalt von $slots kannst du dir über einen Hook in der Konsole ausgeben lassen:
mounted(){
console.log(this.$slots.headline)
}
=== scoped Slots ===
Scoped Slots erlauben es Daten vom Slot der Komponente zur Parent App zu übertragen.

Du kannst einfach im Slot Tag Attribute definieren, die dann in einem Objekt in der Eltern Komponente genutzt werden können:

'''Komponente'''
<syntaxhighlight lang="html5">
<template>
<ul>
<li v-for="goal in goals" :key="goal">
<slot :item="goal" another-prop="hello"></slot>
</li>
</ul>
</template>

<script>
export default {
data() {
return {
goals: ['Finish the coarse', 'Learn Vue'],
}
}
}
</script>

</syntaxhighlight>

Und sie in der Elternkomponente auswerten.

'''Main App'''
<syntaxhighlight lang="html5">
<course-goals>
<template #default="myProps">
<h4>{{ myProps.item }}</h4>
<p>{{ myProps.anotherProp }}</p>
</template>
</course-goals>
</syntaxhighlight>

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.

=== <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.

=== <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>

== Custom Form Control ==
Wenn man v-model in einer eigenen Component nutzt
<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>
Die beiden Snipperts verhalten sich also identisch.

Sobald v-model eingesetzt wird stehen also auch das '''Emit und das Prop in der Komponente''' zur Verfügung:

props:['model-value'],
emits: ['update:modelValue'],

Diese können wir nutzen wie hier im Beispiel. modelValue ist immer aktuell, da eine Aktualisierung über $emit an die Parent Komponente geht und von dieser wieder über das prop model-value zurückkommt und so auch in <template> bei modelValue aktualisiert wird.

Beispiel RatingControl.vue
<syntaxhighlight lang="html5">
<template>
<ul>
<li><button :class="{active: modelValue === 'poor'}" @click="activate('poor')" type="button">Poor</button></li>
<li><button :class="{active: modelValue === 'average'}" @click="activate('average')" type="button">Average</button></li>
<li><button :class="{active: modelValue === 'great'}" @click="activate('great')" type="button">Great</button></li>
</ul>
</template>

<script>
export default {
props:['model-value'],
emits: ['update:modelValue'],
methods:{
activate(option){
this.$emit('update:modelValue', option);
}
}
}
</script>
</syntaxhighlight>
Parent
<syntaxhighlight lang="html5">
<template>
<rating-control v-model="rating"></rating-control>
</template>

<script>
import RatingControl from './RatingControl.vue'
export default {
components:{
RatingControl
},
data(){
return {
rating: null
}
},
methods: {
submitForm(){
console.log('Rating: ' + this.rating);
this.rating = null;
},
}
}
</script>
</syntaxhighlight>

Vue - Components

2021-01-06T13:33:08Z

37.49.72.8: /* Dynamic Components */

Siehe auch
[[Vue.js]]
[[Vue CLI]]

Components sind '''wiederverwendbare Logikbausteine'''. Du kannst damit z.B. Logik so Kapseln, dass sie nicht durch andere Ereignisse oder Eigenschaften beeinflusst wird.

Durch die Aufteilung einer großen App in kleinere Bausteine wird sie weniger fehleranfällig und leichter wartbar und die Entwicklung gerade bei größeren Apps effektiver.

Eine Component sieht im Template '''wie ein neuer Tag''' aus. Damit es keine '''Namenskonflikte''' gibt verwendest Du als Name am Besten eine Bezeichnung mit zwei Worten und Bindestrich <contact-details>. Dies kommmt bei normalen Tags nicht vor.

Definiert wird eine Komponente mit der component() Methode. Technisch gesehen ist eine Komponente eine '''App in einer App'''. Daher erzeugt man sie auch ganz ähnlich:

const app = Vue.createApp({ //... }) // creation of an app
app.component('single-contact', { //... }) // creation of a component in this app

Im ersten Argument definiert man den Namen über den später als Tag (<single-contact>) zugegriffen werden kann. Im zweiten Argument übergibt man ein Objekt, dass wiederum eigene data, methods... Objekte enthalten kann die aber nur für diese Komponente gelten.

== Component Template ==
Die Component ist also eine Art Mini-App in der Hauptapp. Sie benötigt wie eine App ein Template. Es gibt mehrere Möglichkeiten das Template zu übergeben.

=== template Object ===
<syntaxhighlight lang="javascript">
app.component('friend-contact', {
template: `
<li>
<h2>{{friend.name}}</h2>
<button @click="toggleDetails()">Show Details</button>
<ul v-if="detailsVisible">
<li><strong>Phone:</strong> {{friend.phone}} </li>
<li><strong>Email:</strong> {{friend.email}} </li>
</ul>
</li>
`,// backticks allow multiline code
</syntaxhighlight>

== Quickstart - Component mit CLI ==
Wenn man mit Components arbeitet bietet sich auch die Arbeit mit dem [[Vue CLI]] an. In Kurzform die Schritte die Du benötigst um eine Vue App und Komponenten zu nutzen.
'''Komponente erstellen:'''
* '''components/MyComponent.vue'''
** <template> Abschnitt
** <script>export default{}</script> Abschnitt
'''Komponente in Main App registrieren'''
* '''App.vue''' erstellen
** <template> und <script> wie oben erstellen
* '''main.js'''
** createApp wird beim Erstellen schon eingefügt
** Hauptapp (i.d.R. App.vue) importieren
** Config Oject der Komponenten importieren
** app Instanz über createApp erzeugen
** mit Funktion components in App Instanz registrieren
** App mounten
''' Daten aus Main App senden '''
* Daten definieren und im custom-tag binden
* in der Komponente als props nutzen
''' Daten aus Komponente an Main App senden '''
* data() der App definieren
* Funktion mit this.$emit('my-emitter') definieren
* Optional (good practice) in emits: ['my-emitter] listen
main.js
<syntaxhighlight lang="javascript">
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';
// ...

const app = createApp(App);
app.component('my-component', MyComponent); // always use dashed names thus they can't clash with existing html names
// ...
app.mount('#app');
</syntaxhighlight>

'''App.vue'''
<syntaxhighlight lang="html5">
<template>
<h1>The App</h1>
<my-component></my-component>
</template>

<script>
import MyComponent from './components/MyComponent.vue'
export default {
components: {
ActiveUser,
UserData
}
}
</script>
</syntaxhighlight>

<syntaxhighlight lang="html5">
<template>
</template>
<script>
export default {

}
</script>
<style>
</style>
</syntaxhighlight>

== Single File Components mit Vue CLI ==
Wenn man größere Apps bauen und effektiv mit Components arbeiten möchte hilft das Vue CLI und ein Development Setup mit Node.js und npm. Die folgenden Beispiele nutzen Single File Components. Schau unter
[[Vue CLI]]
nach wenn du nicht weißt wie man ein solches Setup aufbaut.

== Component Communication ==
=== Parent - Child Communication mit props ===
https://v3.vuejs.org/guide/component-props.html

'''Mit props sendest Du Daten von der Parent App an die Child Component.'''

'''App.vue - <template> der Eltern App.'''
<syntaxhighlight lang="html5>
<ul>
<friend-contact
name="Stephan"
phone-number="123"
email-address="my@email.tld">
</friend-contact>
<friend-contact
name="Finn"
phone-number="345"
email-address="my@mymail.tld">
</friend-contact>
</ul>
</syntaxhighlight>

'''FriendContact.vue - <script> - Child App'''
<syntaxhighlight lang="javascript">
props:[
'name', 'phoneNumber', 'emailAddress'
],
</syntaxhighlight>

'''FriendContact.vue - <template>'''
<syntaxhighlight lang="html5>
<h2>{{name}}</h2>
<button @click="toggleDetails"> {{detailsVisible ? 'Hide' : 'Show'}} Details </button>
<ul v-if="detailsVisible">
<li><strong>Phone: </strong>{{phoneNumber}}</li>
<li><strong>Email: </strong>{{emailAddress}}</li>
</ul>
</syntaxhighlight>

Das '''props Objekt in der Komponente''' definiert welche Attribute die Komponente akzeptiert und erwartet. Im der Parent App übergibt man die Daten für diese props einfach als Attribute.
* werden in props der component als ''camelCase'' , stehen aber als ''kebab-case'' im HTML zur Verfügung (du solltest sie auch so verwenden)
* props stehen mit ''this.myProp'' auch in Methoden etc. zur Verfügung

==== Unidirectional Data Flow ====
Daten die an die Kind App übertragen werden '''dürfen nicht mehr verändert werden'''.

Beispiel: Wenn Du eine prop isFavourite hast und Sie über einen Toggle Button verändern willst kannst du das nicht in der Child App verändern weil die Daten nur von Parent nach Child fließen dürfen. Vue gibt einen Fehler aus.

Es gibt zwei Strategien die man anwenden kann:
* Daten zurück an Parent übertragen (siehe unten)
* Daten nutzen um eine Komponentenvariable zu initialisieren und diese verändern.

==== Props Object ====
Anstatt einem Array kann man auch Objekte übertragen. Darin kann man einige '''Zusatzinformationen''' unterbringen. Das ist vor allem bei großen Projekten vlt. mit mehreren Programmierern sinnvoll um Komponenten zuverlässiger zu machen. Die zusätzlichen Properties sind festgelegt: type, required

<syntaxhighlight lang="javascript">
props:['name', 'phoneNumber', 'emailAddress'], // Array
props:{ name: String, phoneNumber: String, emailAddress: String, }, // Object mit Type
props:{
name: { type: String, required: false},
isFavourite: {
type: String,
required: false,
default: '0', // could also be a function: function(){ return: '1'},
validator: function(value){ return value === '0' || value === '1' }
}
}
</syntaxhighlight>
Mit den zusätzlichen Infos kann vue in der Konsole Fehler ausgeben oder du kannst selber Auswertungen der Daten in der Komponente vornehmen. Erlaubte Types sind:
String, Number, Boolean, Array, Object, Date, Function, Symbol
But type can also be any constructor function (built-in ones like Date or custom ones).

==== Props mit dynamischen Daten nutzen ====
Um Props dynamisch zu nutzen kann man sie einfach mit v-bind (oder : ) an Daten binden und mit v-for durchlaufen. Plicht ist jetzt das key Attribut in die man eine eindeutige id geben muss.

'''App.vue:'''
<syntaxhighlight lang="javascript">
//...
friends:[
{
id: 'yvonne',
name: 'Yvonne Oßwald',
phone: '49 123 456',
email: 'post@yvonneosswals.de',
isFavourite: false
},
//...
</syntaxhighlight>

'''in <template>'''
<syntaxhighlight lang="html5">
<ul>
<friend-contact
v-for="friend in friends"
:key="friend.id"
:name="friend.name"
:phone-number="friend.phone"
:email-address="friend.email">
</friend-contact>
</ul>
</syntaxhighlight>

Die Komponente
<syntaxhighlight lang="html5">
<li>
<h2>{{name}} {{friendIsFavourite ? '(*)' : ''}}</h2>
<button @click="toggleFavourite">Toggle Favourite</button>
<button @click="toggleDetails"> {{detailsVisible ? 'Hide' : 'Show'}} Details </button>
<ul v-if="detailsVisible">
<li><strong>Phone: </strong>{{phoneNumber}}</li>
<li><strong>Email: </strong>{{emailAddress}}</li>
</ul>
</li>
</syntaxhighlight>
<syntaxhighlight lang="javascript">
props:{
name: String,
phoneNumber: String,
emailAddress: String,
isFavourite: {type: Boolean, required: false, default: false}
},
</syntaxhighlight>

==== Fallthrough props - $attr Objekt ====
Angenommen Du hast eine BaseButton.vue Komponente ohne definierte Props.
'''Im Parent kannst Du trotzdem Attribute und Events''' nutzen...
<base-button type="submit" @click="doSomething">Click me</base-button>
... und diese dann '''in der Komponente auswerten'''.
Dafür hat vue ein spezielles $attrs Objekt auf das Du mit
this.$attrs
zugreifen kannst. Dies kann z.b. bei Komponenten mit nur geringer Funktionalität nützlich sein, die eher zur reinen Ausgabe dienen.

==== Fallthrough props - root Element ====
Fallthrough Properties ermöglichen es Properties und Events in Komponenten zu nutzen.

Wenn man Properties oder Events in einer Komponente nutzt werden Sie von Vue automatisch per default auf das Root Element angewendet.

Einsatz der BaseButton Komponente
<syntaxhighlight lang="html5">
<template>
<base-button @click="setSelectedTab('add-resource')">Add Resource</base-button>
</template>
</syntaxhighlight>

Der click Listener wird hier automatisch auf das Root Element der Button Komponente angewendet - nämlich den button tag.

Definition der BaseButton Komponente:
<syntaxhighlight lang="html5">
<template>
<button :type="type" :class="mode">
<slot>Label goes here</slot>
</button>
</template>
</syntaxhighlight>

==== Alle props in einem Objekt binden ====
Angenommen deine Komponente sieht etwas so aus:

'''UserData.vue'''
<syntaxhighlight lang="html5">
<template>
<h2>{‌{ firstname }} {‌{ lastname }}</h2>
</template>

<script>
export default {props: ['firstname', 'lastname'] }
</script>
</syntaxhighlight>

Anstatt alle Props einzeln zu übertragen kannst du auch ein Übergeordnetes Objekt definieren und dieses übertragen.

'''App.vue'''
<syntaxhighlight lang="javascript">
data() {
return {person: { firstname: 'Max', lastname: 'Muster' } };
}
</syntaxhighlight>
<syntaxhighlight lang="html5">

<user-data :firstname="person.firstname" :lastname="person.lastname"></user-data>

<user-data v-bind="person"></user-data>
</syntaxhighlight>

=== Child - Parent Communication mit custom Events ($emit) ===

'''Mit custom Events sendest du Daten von einer Komponente zurück an die Parent app.'''
Parent App -- [v-bind data] --> Component -- [custom Event data] -->
* Custom Events definierst du mit $emit in der Komponente
* In der Parent App nutzt du das Event im HTML Teil mit v-on

Wenn in einer Komponente Daten verändert werden muss man sie zurück zur Elternkomponente übertragen. Das Ändern der Props ist wegen dem unidirectional dataflow nicht erlaubt.

'''$emit()'''

Um Daten zurück zu senden können wir custom Events nutzen. Dazu gibt es die $emit Funktion
this.$emit('event-name', argument1, argument2, ...) // always use kebab-case
# in der Component in einer method this.$emit aufrufen z.b. this.$emit('toggle-state', this.id)
## id ist meist sinnvoll damit in der Parent App der Datensatz zugeordnet werden kann.
# im HTML der Eltern App einen v-on mit diesem Event anlegen z.B. @toggle-state="toggleState"
# in der gebundenen Methode in der Eltern App verarbeiten z.b. toggleState(id){ //ie. store in db }

Beispiel - es soll ein isFavourite Datum aus der Kindkomponente (Friendcontact.vue) gesetzt werden. Mit Klick auf den Button wird ein CustomEvent gesendet. Dieses wird in der Parent App ausgewertet und in den Daten gesezt. Über das v-bind in der Parent App wird es zurück in die h2 der Kind Komponente gesendet und diese aktualisiert.

'''FriendContact.vue'''
<syntaxhighlight lang="html">
<template>
<li>
<h2>{{name}} {{isFavourite ? '(*)' : ''}}</h2>
<button @click="toggleFavourite">Toggle Favourite</button>

</li>
</template>

<script>
export default {
props:{
id: {type: String, required: true},
//...
isFavourite: {type: Boolean, required: false, default: false}
},
emits:['toggle-favourite'], // emits object is optional and just for documentation purpose
methods:{
toggleFavourite(){
this.$emit('toggle-favourite', this.id);
}
}

}
</script>
</syntaxhighlight>
'''App.vue'''
<syntaxhighlight lang="html">
<template>
<section>
<header><h1>My Friends</h1></header>
<ul>
<friend-contact
v-for="friend in friends"
:key="friend.id"
:id="friend.id"
:name="friend.name"
//...
:is-favourite="friend.isFavourite"
@toggle-favourite="toggleFavouriteState">
</friend-contact>
</ul>
</section>
</template>

<script>
import FriendContact from './components/FriendContact.vue'
export default {
components: {
FriendContact
},
data(){
return {
friends:[
{
id: 'yvonne',
name: 'Yvonne Oßwald',
phone: '49 123 456',
email: 'post@yvonneosswals.de'
},
{
id: 'finn',
name: 'Finn Schlegel',
phone: '49 456 789',
email: 'post@finnschlegel.de' ,
isFavourite: true
},
]
}
},
methods:{
toggleFavouriteState(friendId){
const identifiedFriend = this.friends.find(
(friend) => friend.id === friendId // eq: function(friend){return friend.id...}
// this callback is executed on every friend (array item)
// first item match is returned
)
// identifiedFriend is a proxy which handles the origin array element of friends array
// thats why we can modify identifiedFriend and friends will be altered too
// console.log('identifiedFriend: ' + identifiedFriend.id)
identifiedFriend.isFavourite = !identifiedFriend.isFavourite
}
}
}
</script>
</syntaxhighlight>

=== provide und inject ===
Manchmal hat man eine Art "Passthrough" Komponenten.

Dies bedeutet, dass diese Komponenten keine eigene Logik für eingehende props oder ausgehende emits zur Verfügung stellen sondern diese nur an die nächste Ebene (props an die Kind-Komponente und emit an die Elternelemente weitergeben.

Beispiel:

'''App.vue'''
<syntaxhighlight lang="html5">
<template>

<knowledge-base :topics="topics" @select-topic="activateTopic"></knowledge-base>

</template>
<script>
export default {
data() {
return {
topics: [
{
id: 'basics',
title: 'The Basics',
description: 'Core Vue basics you have to know',
fullText:
'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
},
{
id: 'components',
title: 'Components',
description:
'Components are a core concept for building Vue UIs and apps',
fullText:
'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
},
],
activeTopic: null,
};
},
methods: {
activateTopic(topicId) {
this.activeTopic = this.topics.find((topic) => topic.id === topicId);
},
},
};
</script>
</syntaxhighlight>

'''KnowledgeBase.vue'''
Hier werden die Props und das event quasi nur durchgeleitet.
<syntaxhighlight lang="html5">
<template>
<knowledge-grid :topics="topics" @select-topic="$emit('select-topic', $event)"></knowledge-grid>
</template>
<script>
export default { props: ['topics'], emits: ['select-topic'],};
</script>
</syntaxhighlight>

'''KnowledgeGrid.vue'''
Hier werden die Props zwar in der for Schleife genutzt, das select-topic event wird durchgeleitet.
<syntaxhighlight lang="html5">
<template>
<knowledge-element
v-for="topic in topics"
:key="topic.id"
:id="topic.id"
:topic-name="topic.title"
:description="topic.description"
@select-topic="$emit('select-topic', $event)"
></knowledge-element>
</template
<script>
export default { props: ['topics'], emits: ['select-topic']};
</script>
</syntaxhighlight>

'''KnowledgeElement.vue'''
Hier wird schließlich das Event select-topic erzeugt.
<syntaxhighlight lang="html5">
<button @click="$emit('select-topic', id)">Learn More</button>
</syntaxhighlight>

==== provide und inject eine Eigenschaft ====
Mit dem Provide Objekt kannst du Properties bereitstellen und mit inject in einer anderen Komponente nutzbar machen. Hinweis: Du kannst nur '''in Richtung der Kindelemente''' injecten. Im Beispiel oben möchten wir die topics direkt zu KnowledgeGrid.vue senden. Das geht folgendermaßen
* provide Object in App.vue hinzufügen und Daten hinzufügen
* statt dem props Object die Daten mit inject nutzen
In App.vue ergänzen wir die configuration objects um das provide object (z.b. unter dem data) object
<syntaxhighlight lang="javascript">
//..
provide() {
return {topics:this.topics}
},
</syntaxhighlight>
Wir stellen also eine Eigenschaft "topics" zum injecten (nutzen) bereit. Der Name ist frei wählbar. Hier kopieren wir einfach das schon vorhandene topics Ojekt aus data. Man kann aber auch eigene Objekte definieren.

Um das jetzt in KnowledgeGrid zu nutzen müssen wir dort das inject Objekt nutzen. Es ersetzt in diesem Fall vollständig die props. Daher schreiben wir statt props einfach inject:
inject: ['topics'],

==== provide und inject für custom events ====
provide und inject funktionieren auch mit Methoden. So können einfach die Methode (oder besser den Zeiger auf eine Methode) injekten.
'''App.vue - provide object'''
selectTopic: this.activateTopic // point at the method
In KnowledgeElement injekten wir:
'''KnowledgeElement.vue'''
inject: ['selectTopic'],
und schreiben den button etwas um:
<button @click="selectTopic(id)">Learn More</button>
==== Komplettes Beispiel ====
App.vue
<syntaxhighlight lang="html5">
<template>
<div>
<active-element
:topic-title="activeTopic && activeTopic.title"
:text="activeTopic && activeTopic.fullText"
></active-element>
<knowledge-base></knowledge-base>
</div>
</template>

<script>
export default {
data() {
return {
topics: [
{
id: 'basics',
title: 'The Basics',
description: 'Core Vue basics you have to know',
fullText:
'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
},
{
id: 'components',
title: 'Components',
description:
'Components are a core concept for building Vue UIs and apps',
fullText:
'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
},
],
activeTopic: null,
};
},
provide() {
return {
topics: this.topics,
selectTopic: this.activateTopic // point at the method
}
},
methods: {
activateTopic(topicId) {
this.activeTopic = this.topics.find((topic) => topic.id === topicId);
},
},
// use a hook to simulate data changes
// this proves, that data in provide is updated too
mounted(){
setTimeout(
() => {
this.topics.push({
id: 'events',
title: 'Events',
description:
'Events are important in vue',
fullText:
'Events allow you to trigger code on demand.',
})
},
3000
)
}
};
</script>

<style>
/* styling goes here */
</style>
</syntaxhighlight>

'''KnowledgeBase.vue'''
<syntaxhighlight lang="html5">
<template>
<section>
<h2>Select a Topic</h2>
<knowledge-grid></knowledge-grid>
</section>
</template>

<script>
export default {
};
</script>
</syntaxhighlight>

'''KnowledgeGrid.vue'''
<syntaxhighlight lang="html5">
<template>
<ul>
<knowledge-element
v-for="topic in topics"
:key="topic.id"
:id="topic.id"
:topic-name="topic.title"
:description="topic.description"
></knowledge-element>
</ul>
</template>

<script>
export default {
inject: ['topics'],
};
</script>
</syntaxhighlight>

'''KnowledgeElement.vue'''
<syntaxhighlight lang="html5">
<template>
<li>
<h3>{{ topicName }}</h3>
<p>{{ description }}</p>
<button @click="selectTopic(id)">Learn More</button>
</li>
</template>

<script>
export default {
inject: ['selectTopic'], // we expect a function named selectTopic
props: ['id', 'topicName', 'description'],
emits: ['select-topic'],
};
</script>
</syntaxhighlight>

== Global / Local ==
Bisher haben wir Komponenten in main.js global registriert. Das ist sinnvoll bei "General Purpose Components" oder wenn Sie in vielen anderen Komponenten eingesetzt werden sollen.
Global
* Überall verfügbar, auch wenn nicht genutzt
* Muss beim ersten Aufruf der Seite vom Browser geladen werden (Performance)
main.js
import BaseBadge from './components/BaseBadge.vue';
const app = createApp(App);
app.component('base-badge', BaseBadge);
app.mount('#app');
Oft ist es besser Komponenten nur dort zu registrieren wo sie benötigt werden.
App.vue - <script>
<syntaxhighlight lang="javascript">
import TheHeader from './components/TheHeader.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';
export default {
components: {
TheHeader,
// or 'the-header': TheHeader,
// or TheHeader : TheHeader
BadgeList,
UserInfo,
},
</syntaxhighlight>
Diese Komponenten sind nur in App.vue verfügbar. Du kannst Sie natürlich über import auch in weiteren Komponenten nutzen.

=== scoped styling ===
Mit dem Attribut scoped werden Styles nur für die Komponente angewendet.
<style scoped>
Best practice: Globale Styles in App.vue

== Slots ==
Slots sind eine Art Wrapper für eine Kind-Komponente.

Komponenten können in einem Template nicht ineinander Verschachtelt werden. Manchmal möchte man aber genau das haben um z.B. ein gestyltes Element (z.b. eine Card) wiederverwenden zu können. Der Inhalt soll aber über eine andere Komponente gerendert werden. So kann man z.B. Styles gut wiederverewnden.
* Komponente registrieren (oft in main.js da man sie global haben möchte)
* <slot></slot> Tag in die Slot Komponente einfügen
* in der Kindkomponente einfach den custom Tag der Komponente als Wrapper nutzen
Für solche Zwecke gibt es Slots.
BaseCard.vue
<syntaxhighlight lang="html5">
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
div {
margin: 2rem auto;
max-width: 30rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
}
</style>
</syntaxhighlight>

ChildComponent.vue
<syntaxhighlight lang="html5">
<template>
<base-card>
<header>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</header>
<p>{{ infoText }}</p>
</base-card>
</template>

<script>
export default {
props: ['fullName', 'infoText', 'role'],
};
</script>

<style scoped>
div header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</syntaxhighlight>

So wie die props zum Transport von Daten dienen, so dienen die Slots zum Transport von dynamischem HTML Code zwischen den Komponenten.

=== Named Slots - v-slot===
Mit Named Slots kann man mehrere Slots nutzen, und damit auch komplexere Templates erzeugen. Dazu gibt es die Direktive '''v-slot'''. Wir nutzen zusätzlich das Standard HTML Tag <template> Das bietet sich an, da es keinen Inhat - also nicht mal eine Leerzeile - ausgibt.
v-slot:[slotname]
statt v-slot: kann man auch den Shortcut # nehmen:
#[slotname]

Beispiel BaseCard.vue
<syntaxhighlight lang="html5">
<template>
<div>
<header>
<slot name="headline"></slot>
</header>
<slot></slot>
</div>
</template>
...
</syntaxhighlight>
Kindkomponente
<syntaxhighlight lang="html5">
<template>
<base-card>
<template v-slot:headline>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</template>
<template v-slot:default>
<p>{{ infoText }}</p>
</template>
</base-card>
</template>
</syntaxhighlight>

=== Default Content für Slots ===
Du kannst default Inhalt anzeigen wenn die Kindkomponente keinen Inhalt für einen Slot hat.
<pre>
<slot name="headline">
<h2>This default fallback content be shown if no content is provided</h2>
</slot>
</pre>

=== v-if mit $slots ===
Manche Slots möchte man nur anzeigen wenn auch Inhalt dafür vorhanden ist. Ansonsten soll auch das umgebende Tag nicht ausgegeben werden. Dies kann man mit v-if und der $slots Variablen erreichen.

$slots enthält die Daten für einen aktuellen Slot. Das Nutzen wir über ein v-if:
<syntaxhighlight lang="html5">
<header v-if="slots.headline">
<slot name="headline">
</slot>
</header>
</syntaxhighlight>
So wird die headline nur ausgegeben, wenn sie auch vorhanden ist.

Tipp: Den Inhalt von $slots kannst du dir über einen Hook in der Konsole ausgeben lassen:
mounted(){
console.log(this.$slots.headline)
}
=== scoped Slots ===
Scoped Slots erlauben es Daten vom Slot der Komponente zur Parent App zu übertragen.

Du kannst einfach im Slot Tag Attribute definieren, die dann in einem Objekt in der Eltern Komponente genutzt werden können:

'''Komponente'''
<syntaxhighlight lang="html5">
<template>
<ul>
<li v-for="goal in goals" :key="goal">
<slot :item="goal" another-prop="hello"></slot>
</li>
</ul>
</template>

<script>
export default {
data() {
return {
goals: ['Finish the coarse', 'Learn Vue'],
}
}
}
</script>

</syntaxhighlight>

Und sie in der Elternkomponente auswerten.

'''Main App'''
<syntaxhighlight lang="html5">
<course-goals>
<template #default="myProps">
<h4>{{ myProps.item }}</h4>
<p>{{ myProps.anotherProp }}</p>
</template>
</course-goals>
</syntaxhighlight>

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.

=== <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.

=== <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>

== Custom Form Control ==
Wenn man v-model in einer eigenen Component nutzt
<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>

Diese stehen daher in der Komponente so zur Verfügung:

Beispiel RatingControl.vue
<syntaxhighlight lang="html5">
<template>
<ul>
<li><button :class="{active: modelValue === 'poor'}" @click="activate('poor')" type="button">Poor</button></li>
<li><button :class="{active: modelValue === 'average'}" @click="activate('average')" type="button">Average</button></li>
<li><button :class="{active: modelValue === 'great'}" @click="activate('great')" type="button">Great</button></li>
</ul>
</template>

<script>
export default {
props:['model-value'],
emits: ['update:modelValue'],
methods:{
activate(option){
this.$emit('update:modelValue', option);
}
}
}
</script>
</syntaxhighlight>
Parent
<syntaxhighlight lang="html5">
<template>
<rating-control v-model="rating"></rating-control>
</template>

<script>
import RatingControl from './RatingControl.vue'
export default {
components:{
RatingControl
},
data(){
return {
rating: null
}
},
methods: {
submitForm(){
console.log('Rating: ' + this.rating);
this.rating = null;
},
}
}
</script>
</syntaxhighlight>