Vue-Komponenten programmatisch mounten

Veröffentlicht von am

unter JavaScript und Vue.js

In diesem Eintrag zeige ich, wie man Vue Komponenten programmatisch mounten kann, und wie man damit Vue-Komponenten und extern verwaltete DOM-Elemente ineinander verschachtelt.

Ich setze das Vue.js Frontend-Framework in vielen meiner Projekte ein. Es ist einfach zu lernen, gut dokumentiert, und die "Single-File-Component"-Architektur (.vue-Dateien) erleichtert es, wiederverwendbare Komponenten zu erstellen und zu warten.

Innerhalb einer Vue-Komponente werden alle DOM-Elemente von Vue verwaltet: Je nach Bedarf werden neue Elemente in dem DOM-Baum eingehängt oder entfernt.

Ein einfaches Beispiel:

Hier wird bei Bedarf ein neues h1-Element erstellt oder wieder entfernt, sobald der Knopf gedrückt wird.

Ab und an ist es notwendig, ein Element von externem Code (z.B. einer Bibliothek) verwalten zu lassen, der nicht für die Benutzung mit Vue ausgelegt ist, so dass sich folgende Gliederung ergibt:

	<template>
		<my-component>
			<div class="dom-element-from-external-library">
				<h1>Hello from external library</h1>
			</div>
		</my-component>
	</template>

In Vue stehen unter Anderem die Lifecycle-Hooks (mounted(), updated(), beforeDestroy()) sowie die $el und $ref -Properties zur Verfügung, um externen Code an den Lebenszyklus einer Vue-Komponente anzuschließen.

Ein Beispiel:

Manchmal kann es erforderlich sein, in einer Vue-Komponente per externer Bibliothek ein Kind-Element zu erzeugen, das wiederum eine weitere Vue-Komponente als Kind-Element haben soll. So dass ich folgende Gliederung ergibt:

	<template>
		<my-component>
			<div class="dom-element-from-external-library">
				<h1>Hello from external library</h1>
				<my-other-component />
			</div>
		</my-component>
	</template>

Die Implentation dieser Struktur ist etwas komplexer. Mit einer einfachen Helper-Funktion ist es möglich, Vue-Komponenten programmatisch in einem beliebigen Eltern-Element zu mounten.

Die Helperfunktion habe ich hierbei von pearofducks github übernommen und leicht angepasst.

Hinterlasse einen Kommentar

Verfügbare Formatierungen

Benutze Markdown-Befehle oder ihre HTML-Äquivalente, um deinen Kommentar zu formatieren:

Textauszeichnungen
*kursiv*, **fett**, ~~durchgestrichen~~, `Code` und <mark>markierter Text</mark>.
Listen
- Listenpunkt 1
- Listenpunkt 1
1. Nummerierte Liste 1
2. Nummerierte Liste 2
Zitate
> Zitierter Text
Code-Blöcke
```
// Ein einfacher Code-Block
```
```php
// Etwas PHP-Code
phpinfo();
```
Verlinkungen
[Link-Text](https://example.com)
Vollständige URLs werden automatisch in Links umgewandelt.

Auf der eigenen Website geantwortet? Sende eine Webmention!